刪除動態添加的div與子女元素

Question

我模擬表用下面的代碼：

<div id="edit_table"> 
    <div class="table_row"> 
     <div class="table_cell"> 
      <input type="text" id="Dt_of_Birth"> 
     </div> 
     <div class="table_cell"> 
      <input type="text" id="F_Name"> 
     </div> 
     <div class="table_cell"> 
      <input type="text" id="L_Name"> 
     </div> 
     <div class="table_cell"> 
      <button id="del_row">Delete Row</button> 
     </div> 
    </div> 
</div> 
<button id="add_row">Add Row</button> 

，並在此表中動態地

$('#add_row').on('click', function() { 
    $('.table_row:last').append('<div class="table_row"><div class="table_cell"><input type="text" id="Dt_of_Birth"></div><div class="table_cell"><input type="text" id="F_Name"></div><div class="table_cell"><input type="text" id="L_Name"></div><div class="table_cell"><button id="del_row">Delete Row</button> </div></div>'); 
}); 

添加行。當我試圖刪除一行，點擊行中的刪除按鈕，它的行爲不正常。如果有下面的行點擊'刪除'按鈕，則所有這些行向下都會被刪除。我該如何阻止並刪除只點擊該按鈕的那一行。

我刪除特定行的代碼是：

$(document).on('click', '#del_row', function() { 
    alert('Delete button clicked ....'); 
    $(this).parent().parent('div .table_row').remove(); 
}); 

• 這當然不能正常工作。

請幫我正確的jQuery的邏輯特定行的缺失

在此先感謝您的幫助....

Answer 1

你應該追加在#add_row.table_row不.table_row:last和你#del_row點擊事件應該如下。

$('#add_row').on('click', function() { 
 
    $('#edit_table').append('<div class="table_row"><div class="table_cell"><input type="text" id="Dt_of_Birth"></div><div class="table_cell"><input type="text" id="F_Name"></div><div class="table_cell"><input type="text" id="L_Name"></div><div class="table_cell"><button id="del_row">Delete Row</button> </div></div>'); 
 
}); 
 

 
$(document).on('click', '#del_row', function() {    
 
    $(this).closest('.table_row').remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="edit_table"> 
 
    <div class="table_row"> 
 
     <div class="table_cell"><input type="text" id="Dt_of_Birth"></div> 
 
     <div class="table_cell"><input type="text" id="F_Name"></div> 
 
     <div class="table_cell"><input type="text" id="L_Name"></div> 
 
     <div class="table_cell"><button id="del_row">Delete Row</button> </div> 
 
    </div> 
 
</div> 
 
<button id="add_row">Add Row</button>

希望這將解決您的問題。

Answer 2

當你添加一行時，它會在刪除按鈕下面創建一行？也許如果你把刪除按鈕放在div.table_row之外，它就可以工作。

Answer 3

試試這個。我改變了以下內容：

• 改變#del_row到.del_row因爲ID必須是唯一
• 改變add處理函數附加到容器，而不是最後一排
• 在刪除處理程序改變了家長選擇

$(function(){ 
 
    $('#add_row').on('click', function(){ 
 
     $('#edit_table').append('<div class="table_row"><div class="table_cell"><input type="text" id="Dt_of_Birth"></div><div class="table_cell"><input type="text" id="F_Name"></div><div class="table_cell"><input type="text" id="L_Name"></div><div class="table_cell"><button class="del_row">Delete Row</button> </div></div>'); 
 
    }); 
 

 
    $(document).on('click', '.del_row', function() { 
 
     alert('Delete button clicked ....'); 
 
     $(this).parents('div .table_row').remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="edit_table"> 
 

 
</div> 
 

 
<button id="add_row">Add Row</button>