Question

我生成以下DisplayDetails.Add(new DisplayDetail() { FirstDisplayColumn = "FieldName1", SecondDisplayColumn = "FieldValue1" }); DisplayDetails.Add(new DisplayDetail() { FirstDisplayColumn = "FieldName2", SecondDisplayColumn = "FieldValue2" }); DisplayDetails.Add(new DisplayDetail() { FirstDisplayColumn = "FieldName3", SecondDisplayColumn = "FieldValue3" }); items.ItemsSource = DisplayDetails;代码

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>

执行此操作时，该行将被删除，但只能在第一次使用，即只能执行一次。

如何删除任何行？

Answer 1

您正在为您的按钮生成重复的id属性，这些属性是无效的html，并且只会调用一次脚本，因为您删除了该按钮。而是删除id并使用类名

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

并将脚本修改为

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

Answer 2

HTML中的ID必须是唯一的，请使用类，然后使用Class Selector (".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();
    });
});

Answer 3

您正在渲染多次具有相同id次无效html的按钮，每次在其上应用选择器时，它会选择在 DOM中找到的第一个元素 ID 已删除。通过附加模型中的ID并为该按钮添加id属性，使class唯一：

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

现在在课堂上应用点击事件：

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

Answer 4

将此id替换为class，因为id重复

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


</script>

<tr>

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

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

4 个答案: