在MVC项目中使用Jquery删除表中的行 [英] Deleting row in table with Jquery in mvc project

问题描述

我生成以下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>

执行此操作后，该行将被删除，但只能在第一次运行，即只能运行一次.

Executing this, the row is deleted but it only works the first time, i.e., only once.

如何删除任何行?

推荐答案

HTML中的ID必须是唯一的，请改用类，然后再使用.

IDs in HTML must be unique, use a class instead then you can use 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();
    });
}); 

这篇关于在MVC项目中使用Jquery删除表中的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！