Question

我被困在某个地方。期待你的帮助。

我正在尝试使用“id”动态附加div，并在单击按钮时删除具有相同“id”的相同div。一切都很好。当我单击相关按钮以附加div时，div将附加动态ID。问题是在单击附加div内的“关闭”按钮时删除相同的div。

假设我附加的div是“Order2”和“Order3”。当我单击“Order3”附加div中的“关闭”按钮时，它将删除相同的div，即“Order3”，但在删除“Order3”div之前，如果我单击“Order2”div内的“关闭”按钮删除所有附加的div。这不是预期的。当我点击“Order2”div中的“关闭”按钮时，它会删除“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

简单地将事件更改为close，因为它是动态元素。

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

 });

Answer 2

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

$('#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

3 个答案: