動態追加divs並刪除jquery中的同一個div

Question

我被困在某處。期待你的幫助。

我想用「id」動態地添加div，並在點擊一個按鈕時刪除與同一個「id」相同的div。一切工作正常。當我點擊相關的按鈕來添加div時，div會添加動態ID。問題是在點擊附加div內的「關閉」按鈕時刪除相同的div。

假設我附加的div是「Order2」和「Order3」。當我點擊「Order3」附加div內的「Close」按鈕時，它將刪除相同的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(); 
    }); 



}); 

這裏是鏈接： 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(); 

});