jquery - 在mvc项目中使用Jquery删除表中的行

Question

我生成以下html代码

<table>
        @for (int i = 0; i < Model.listUsers.Count; i++)
        {
            <tr>

                <td> @Html.DisplayFor(m => m.listUsers[i].Name)</td>
                <td>   @Html.DisplayFor(m => m.listUsers[i].Phone) </td>
                <td>
                    <button type="button" id="delete" data-id="@Model.listUsers[i].ID">Delete</button>
                </td>
            </tr>
        }
</table>

我想删除一行，

<script>
    $(document).ready(function () {
        $("#delete").on("click", function () {
            var tr = $(this).closest('tr');
                tr.remove();
            });
    });

</script>

执行此操作，该行将被删除，但它仅在第一次有效，即仅一次。

如何删除任意行？

Answer 1

HTML 中的 ID 必须是唯一的，使用类即可使用 Class Selector (".class") 。

Selects all elements with the given class.

HTML

<button type="button" class="delete" data-id="@Model.listUsers[i].ID">Delete</button>

脚本

$(document).ready(function () {
    $(".delete").on("click", function () {
        var tr = $(this).closest('tr');
        tr.remove();
    });
});