Question

我的MVC视图中有一个HTML表格。

以下是此表的代码：

<table class="table" >
    @{int rowNo = 0;}
    <tr>
        <td data-toggle="modal" data-target="#newAppointment" style="height: 40px; width: 40px; background: red;">
            <img style="object-fit: cover;" src='@Url.Content("~/Images/plus.png")'/>
        </td>
    </tr>
    <tr style="background: white">
        <th></th>
        <th style="font-size: 20px; text-align: center;color:#1d69b4;">
            Date of birth
        </th>
        <th style="font-size: 20px; text-align: center;color:#1d69b4;">
            Last Name
        </th>
        <th style="font-size: 20px; text-align: center;color:#1d69b4;">
            First Name
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr id="patients">
            <td class="point">
                @(rowNo += 1)
            </td>
            <td class="title">
                @Html.DisplayFor(modelItem => item.Date_of_Birthday)
            </td>
            <td class="title">
                @Html.DisplayFor(modelItem => item.Last_name)
            </td>
            <td class="title">
                @Html.DisplayFor(modelItem => item.First_name)
            </td>
        </tr>
    }
</table>

我需要删除表格中的所有行，因此我需要删除patients中的所有内容。

我尝试通过JS执行以下操作，但它只删除了第一行：

<script>
    $('#search').click(function () {
        $("#patients").remove();
    });
</script>

如何删除所有行？

Answer 1

id用于标识DOM中的唯一元素。您在foreach循环中错误地生成了具有相同ID的多个元素。您可以考虑从id更改为class。这允许识别相同类型的多个元素：

@foreach (var item in Model) {
    <tr class="patients">
        <!-- your code goes here -->
    </tr>
}

然后适当的选择器删除所有行：

$('#search').click(function () {
   $(".patients").remove();
});

使用JavaScript删除HTML表格中的所有行

1 个答案: