使用jQuery append（）删除附加的div

Question

嗨，我有一个按钮，它使用jquery append（）将div添加到我的html中。 现在，每个附加的div都有一个关闭按钮，该按钮使用jquery remove（）删除附加的div。 代码如下：

$(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();
  });
  });
});

现在，在删除附加的div时出现了问题。 当我添加多个div（每个都有一个关闭按钮）并单击最后一个附加div的关闭按钮时，没有任何反应。 但是单击第一个附加div的关闭按钮将关闭所有其他附加div。

我正在尝试仅关闭我关闭的div，而不关闭其他。 我该怎么做呢 ？ 如果有人可以指导我，我将不胜感激。 谢谢。

Answer 1

元素的ID必须唯一，当您使用ID选择器时，它将仅返回具有ID的第一个元素，因此所有单击处理程序都将添加到第一个按钮。

使用类和事件委托

$(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();
    })
});

演示： 小提琴

阅读更多：

• 在动态创建的元素上进行事件绑定？

Answer 2

您需要在按下的按钮附近移除父母/子女。

例如：

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

Answer 3

使用$（this）代替$ 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();
      });
      });
    });