动态追加 div 并在 jquery 中删除相同的 div

Question

我在某个地方卡住了。真诚期待您的帮助。

我正在尝试使用“id”动态附加 div，并在单击按钮时删除具有相同“id”的相同 div。一切正常。当我单击相关按钮附加 div 时，div 会附加动态 id。问题在于单击附加 div 内的“关闭”按钮删除相同的 div。

假设我附加的 div 是“Order2”和“Order3”。当我单击“Order3”附加 div 内的“关闭”按钮时，它正在删除相同的 div 即“Order3”，但如果我单击“Order2” div 内的“关闭”按钮，则在删除“Order3” div 之前所有附加的 div 都被删除。这不是预期的。预计当我单击“Order2”div 内的“Close”按钮时，它将删除“Order2”div。

我知道我犯了愚蠢的错误。请帮我整理一下。提前致谢 我的js代码是：

$(document).ready(function(){
  function addallTit() {
   var container = $('#addTitles');
   var inn = container.find('.app-div');

   var $id = inn.length+1;
   $id++;
$(container).append('<div id="app'+$id+'"><div class="col-md-12"><div class="app-div"><div class="closed-btn pull-right"><a href="javascript:"><i class="fa fa-times "></i></a></div> <div class="input-group" > <span id="sizing-addon2" class="input-group-addon">Order # '+ $id +'</span><input type="text" placeholder=""  class="form-control">  </div></div></div></div>');

$('.closed-btn ').click(function(e){
     e.preventDefault();
    $('#app'+$id).remove();


 });

};


$('#titlesAdds').click(function() {
    addallTit();
    });



});

这里是链接： Fiddle

Answer 1

我正在修改 Norlihazmey Ghazali 的回答。但此修改会正确删除您附加的 div 的所有组件。

$('#addTitles').on('click','.closed-btn',function(e){

   e.preventDefault();

   var par = $(this).closest($("[id^=app]"));

   $(par).remove();

}); 

Answer 2

只需更改关闭事件，因为它是动态元素。

container.on('click','.closed-btn',function(e){
         e.preventDefault();
         $('#app'+$id).remove();

 });

Answer 3

您的一个问题是，您想要删除动态添加的内容。如果要删除添加的元素，请使用.on 方法并将元素的父元素作为选择器。然后第二个问题是，jquery 不知道您要删除哪个元素。这个想法是，找到当前关闭链接的父级，然后删除。只需将您的代码更改为：

$('#addTitles').on('click','.closed-btn',function(e){
   e.preventDefault();
   var par = $(this).parent();
   $(par).remove();

});