jQuery通过动态id删除表行

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

当您单击“添加”按钮时，这将动态添加表格行，我想按 id 删除行，但它只删除最后一行，我该如何修复它？

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

Answer 1

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

相反，使用基于类选择器的单个通用委托(delegate)事件处理程序，并使用 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();
});