動態追加div並在jquery中刪除相同的div

Question

我被困在某個地方。 期待您的幫助。

我試圖用“ id” s動態附加div並在單擊按鈕時刪除具有相同“ id”的相同div。 一切正常。 當我單擊相關按鈕以附加div時，div將附加動態ID。 問題是在單擊附加div內的“關閉”按鈕后刪除相同的div。

假設我附加的div是“ Order2”和“ Order3”。 當我單擊“ Order3”附加div中的“關閉”按鈕時，它將刪除相同的div，即“ Order3”，但是如果我單擊“ Order2” div中的“關閉”按鈕，則在刪除“ Order3” 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();
    });



});

這是鏈接： 小提琴

Answer 1

只需將事件更改為關閉，因為它是動態元素。

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

});