Dynamically create button and then remove that button when clicked in jquery

Question

lHi,

I have some divs in a html doc and when I click the div I am adding a button. eg attached:

HTML:

<div class="week">
     <div class="day wk1" id="day1">   
          <label for="day1">Test</label>       
      </div>
      <div class="day wk1" id="day2">  
          <label for="day2">Test</label>       
      </div>

When I add a button by clicking on the div, no problem.

Add Button:

$(".day").click(function (e) { 
        e.preventDefault();
        var check = $("#day7").width() - 2;
        var insert = $(this).prop("id");
        insert = `#${insert}`;
        var par = $('<br class="break"><button class="testing">').html('Shift Manual Insert').width(check).css("background-color", "green");
        par.appendTo(insert);
        // console.log(insert);
    });

When I remove the button by clicking on it it does remove it but simultaneously adds a new button as per the code above and below.

Remove Button:

$(".day").on('click','.testing', function(e){
    e.preventDefault();
    $(".break").remove;
    $(this).remove();
  });

I am sure I am doing something silly but for the life of me, I cannot figure it out? Please ignore my incorrect use of id's and classes, this is purely a test to gain experience.

Any help will be most appreciated.

Kind regards

Wayne

brk · Accepted Answer · 2018-08-02 09:13:59Z

3

The event is getting propagated from the click handler on dom with .testing class to it's parent that is dom with .day class. .day have another click handler which add the element.So after removing the element again $(".day").click(function(e) { is getting fired which is adding back the button element

Replacee.preventDefault(); with e.stopPropagation(); in the click handler of .testing

$(".day").click(function(e) {
  console.log('x')
  e.preventDefault();
  var check = $("#day7").width() - 2;
  var insert = $(this).prop("id");
  insert = `#${insert}`;
  var par = $('<br class="break"><button class="testing">').html('Shift Manual Insert').width(check).css("background-color", "green");
  par.appendTo(insert);
  // console.log(insert);
});


$(".day").on('click', '.testing', function(e) {
  e.stopPropagation();
  $(".break").remove;
  $(this).remove();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="week">
  <div class="day wk1" id="day1">
    <label for="day1">Test</label>
  </div>
  <div class="day wk1" id="day2">
    <label for="day2">Test</label>
  </div>

edited Aug 2, 2018 at 9:13

answered Aug 2, 2018 at 9:06

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Satchell Over a year ago

Could you maybe add a short explanation why this fixes it?

cdoshi · Accepted Answer · 2018-08-02 09:09:44Z

1

Your button is present inside the div. So when you click the button, your div click event is also fired. This is due to event bubbling. Check https://www.w3schools.com/jquery/event_stoppropagation.asp

$(".day").on('click','.testing', function(e){
    e.stopPropagation();
    e.preventDefault();
    $(".break").remove;
    $(this).remove();
  });

answered Aug 2, 2018 at 9:09

cdoshi

2,8321 gold badge15 silver badges21 bronze badges

Collectives™ on Stack Overflow

Dynamically create button and then remove that button when clicked in jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related