jQuery 按动态 ID 删除 table 行

Question

我有以下代码

<div>
    <input type="text" maxlength="20" id="nameText"></input>
    <button type="button" id="add">Add</button>
</div>
<div>
    <table id="form">
        <tbody>
            <tr>
                <th>Name</th>
                <th>Delete</th>
            </tr>
        </tbody>
    </table>
</div>

jQuery部分

var rowNum = 0;

$('#add').click(function() {
    var name = $('#nameText').val();
    rowNum ++;
    var row = '<tr id="row' + rowNum + '">'
            + '<td>' + name 
            + '<button type="button" id="deleteRow' + rowNum + '">Delete</button>'
            + '</td>'
            + '</tr>';

    $(row).insertAfter($("#form > tbody > tr:last"));
    $('#deleteRow' + rowNum).click(function () {
        $('#row' + rowNum).remove();
    });
});

当你点击"Add"按钮时，这将动态添加table行，我想通过id删除行，但它只删除了最后一行，我该如何解决？

jsfiddle: http://jsfiddle.net/sgs603cm/

Answer 1

不要使用增量 id 属性 - 它们很快就会变得很难维护。

相反，使用基于 class 选择器的单个通用委托事件处理程序，并使用 this 关键字来引用引发事件的元素。试试这个：

$('#add').click(function() {
    var name = $('#nameText').val();
    rowNum ++;
    var row = '<tr id="row' + rowNum + '">'
            + '<td>' + name 
            + '<button type="button" class="delete">Delete</button>'
            + '</td>'
            + '</tr>';

    $(row).insertAfter($("#form > tbody > tr:last"));
});

$('#form').on('click', '.delete', function (e) {
    e.preventDefault();
    $(this).closest('tr').remove();
});

Answer 2

你需要使用，

$(document).on("click", "[id^='deleteRow']", function () {
    $(this).closest("tr").remove();
});

您不应该使用循环绑定点击事件。您可以将 class 分配给元素，也可以使用以选择器开头的属性。

对于您的情况，您还需要使用事件委托。因为，您正在动态创建元素。

Fiddle

jQuery 按动态 ID 删除 table 行

jQuery delete table row by dynamic id

jquery

delete-row