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

Question

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

我正在尝试使用 "id" 动态附加 div，并在单击按钮时使用相同的 "id" 删除相同的 div。一切正常。当我单击相关按钮追加 div 时，div 正在追加动态 ID。问题是在单击附加 div 内的 "Close" 按钮时删除相同的 div。

假设我附加的 div 是 "Order2" 和 "Order3"。当我单击附加 "Order3" 内的 "Close" 按钮时 div，它会删除相同的 div 即 "Order3"，但在删除 "Order3" 之前div 如果我单击 "Order2" div 内的 "Close" 按钮，所有附加的 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();
    });



});

这是 link ： Fiddle

Answer 1

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

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

 });

Answer 2

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

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

});

Answer 3

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

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

   e.preventDefault();

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

   $(par).remove();

});

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

Dynamically append divs and remove the same div in jquery

javascript

jquery

append