javascript - 使用 jQuery append() 删除 append 的 div

Question

您好，我有一个按钮，它使用 jquery append() 将一个 div 添加到我的 html。现在每个 append 的 div 都有一个关闭按钮，它使用 jquery remove() 删除 append 的 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();
  });
  });
});

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

我试图只关闭我关闭的 div 而不是其他的。我该怎么做呢 ？如果有人可以指导我完成，我将不胜感激。谢谢。

Answer 1

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

使用类和事件委托(delegate)

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

演示:Fiddle

更多阅读:

• > Event binding on dynamically created elements?