Question

您好我有一个按钮，使用jquery append（）为我的html添加一个div。现在每个附加的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();
    })
});

演示：Fiddle

更多阅读：

Event binding on dynamically created elements?

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

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

3 个答案: