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

当您点击＆＃34;添加＆＃34;这将动态添加表格行。按钮，我想按ID删除行，但它只删除最后一行，我该如何解决？

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

Answer 1

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

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

您不应使用循环绑定click事件。您可以为元素指定类，也可以使用属性启动选择器。

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

<强> Fiddle

jQuery按动态id删除表行

2 个答案: