使用 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 选择器时，它将 return 仅第一个具有该 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();
    })
});

演示：Fiddle

更多阅读：

Event binding on dynamically created elements?

Answer 2

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

Answer 3

您需要删除所按按钮附近的 parent/child。

例如：

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

使用 jQuery append() 删除附加的 div

Removing div's appended using jQuery append()

html

javascript

jquery

append