Removing div's appended using jQuery append()

Question

Hi i have a button which add's a div to my html using jquery append(). Now each of the div's appended has a close button which removes the appended div using jquery remove(). The code looks like this:

$(document).ready(function(){
  $("#image-btn").click(function(){
  var $imageElement = $("<div class='image_element' id='image-element'><div class='image_holder' align='center'><input type='image' src='{{URL::asset('images/close-icon.png')}}' name='closeStory' class='closebtn' id='close-img-btn' width='22px'><button type='button' class='img_btn' id='img-btn'>Upload Image</button></div></div>");
  $("#element-holder").append($imageElement);
  $imageElement.fadeIn(1000);

  $("#close-img-btn").click(function(){
  $imageElement.remove();
  });
  });
});

Now the problem is arises while removing the appended div's. When i add multiple div's (Each has a close button) and click on the close button of the last appended div nothing happens. But clicking on the close button of the first appended div closes all the other appended div.

I am trying to close only the div that i hit close and not the others. How do i do this ? Would really appreciate if someone could guide me through. Thanks.

Answer 1

ID of an element must be unique, when you use id selector it will return only the first element with the id, so all the click handlers are added to the first button.

Use classes and event delegation

$(document).ready(function () {
    $("#image-btn").click(function () {
        var $imageElement = $("<div class='image_element' ><div class='image_holder' align='center'><input type='image' src='{{URL::asset('images/close-icon.png')}}' name='closeStory' class='closebtn' width='22px'><button type='button' class='img_btn' >Upload Image</button></div></div>");
        $("#element-holder").append($imageElement);
        $imageElement.fadeIn(1000);
    });

    $("#element-holder").on('click', '.closebtn', function(){
        $(this).closest('.image_element').remove();
    })
});

Demo: Fiddle

More Read:

• Event binding on dynamically created elements?

Answer 2

You need remove the parent/child near at button you press.

For example:

 $("#close-img-btn").click(function(){
   $(this).parent('content-div').remove();
});

Answer 3

use $(this) instead of $imageElement

 $(document).ready(function(){
      $("#image-btn").click(function(){
      var $imageElement = $("<div class='image_element' id='image-element'><div class='image_holder' align='center'><input type='image' src='{{URL::asset('images/close-icon.png')}}' name='closeStory' class='closebtn' id='close-img-btn' width='22px'><button type='button' class='img_btn' id='img-btn'>Upload Image</button></div></div>");
      $("#element-holder").append($imageElement);
      $imageElement.fadeIn(1000);

      $("#close-img-btn").click(function(){
      $(this).remove();
      });
      });
    });