如何從表中刪除行

Question

我正在創建一個響應式數據表，每次單擊行末尾的添加按鈕時都會添加一行。 添加按鈕變為刪除按鈕。 這是我制作的代碼

對於表：

<table id="invoice_table_data">
<tr id="last_row">
        <td contenteditable id="item_name"></td>
        <td contenteditable id="item_code"></td>
        <td contenteditable id="description"></td>
        <td>
            <button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button>
        </td>
    </tr>
</table>

點擊添加時：

$("#btn_add").click(function() {
$("#invoice_table_data").append('<tr id="myTableRow'+'" ><td id="item_name'+n+'">'+item_name+'</td><td id="item_code'+n+'"> '+item_code+'</td><td id="description'+n+'">'+description+'</td><td><button type="button" name="delete_" id="delete_" data-idx="'+n+'">x</button></td></tr>');
n+=1;

我的刪除功能：

$('#delete_').click( function () {
var nb=$(this).data('idx');
$("#last_row"+nb).remove();
});

但是，當我點擊刪除似乎沒有任何事情發生。 有人可以幫忙嗎？

Answer 1

HTML中的標識符必須是唯一的 ，因此使用CSS類創建元素。 然后可以使用Class Selecctor 。

更改腳本以將HTML呈現為

<button type="button" class="delete_">x</button>

目前您正在使用的是一種“直接”綁定，它只會在您的代碼進行事件綁定調用時附加到頁面上存在的元素。

使用.on()方法和事件委派方法，同時動態生成元素。 所以將代碼更改為

$("#invoice_table_data").on('click', ".delete_", function(){
    $(this).closest('tr').remove();
});

 var n = 1; $("#btn_add").click(function() { $("#invoice_table_data").append('<tr><td>item_name' + n + '</td><td><button type="button" class="delete_" data-idx="' + n + '">x</button></td></tr>'); n += 1; }); $("#invoice_table_data").on('click', ".delete_", function() { $(this).closest('tr').remove(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="invoice_table_data"> <tr id="last_row"> <td id="item_name"></td> <td> <button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button> </td> </tr> </table> 

Answer 2

使用attribute selector和event delegation

$(document).on('click', "[id^='delete_']", function () {
  var nb=$(this).data('idx');
   $("#last_row"+nb).remove();
});

Answer 3

試試這個 ：

$('document').on('click', '#delete_', function () {
    var nb=$(this).data('idx');
    $("#last_row"+nb).remove();
 });

您需要使用on方法，因為您的刪除按鈕尚未存在。

Answer 4

更改您的腳本，動態添加刪除按鈕，為按鈕提供類名稱btnDelete或類似的東西。

$("#btn_add").click(function() {
$("#invoice_table_data").append('<tr id="myTableRow'+'" ><td id="item_name'+n+'">'
+item_name+'</td><td id="item_code'+n+'"> '
+item_code+'</td><td id="description'+n+'">'
+description+'</td><td><button type="button" class="btnDelete" name="delete_" id="delete_" data-idx="'+n+'">x</button></td></tr>');
n+=1;
});

然后刪除按鈕的腳本是：

$("body").on("click", ".btnDelete", function (e) {
var rowToDelete = $(this).closest("tr");
rowToDelete.remove();
});

http://codepen.io/ailinmcc666/pen/ZBgXBZ

Answer 5

你有兩個不同的問題。

問題1

您不能在頁面上多次使用相同的id 。 這只是HTML的基本規則。 你只能使用一次。 如果您多次使用相同的id ，則只計算第一次。

解

如果您希望能夠定位多個元素，使用類或定位單個父element.firstElementChild並使用element.firstElementChild獲取它的子element.firstElementChild

---

問題2

當您編寫.click ，您告訴瀏覽器在用戶點擊您要定位的元素時要注意。

但是，首次加載頁面時必須存在該元素。 這是因為Javascript的行只能由瀏覽器解析一次。 它會讀取您的代碼，如果您要單擊的元素當時不存在，則會跳過您的代碼。

解

所以你需要做的就是將事件監聽器.click添加到一個非動態的元素上。 請記住，每個單擊事件都會向上傳遞，從用戶單擊的最內層元素，到該元素的父元素，到下一個父元素，依此類推，直到它到達body元素。 因此，如果您將.click添加到列表的父級，它將被正確附加。

使用jQuery，它將是這樣的：

$('#invoice_table_data').on('click', 'button.delete', function(event){
    //run code here
});