jquery - 如何使用ajax删除表中的一行

Question

在此部分 View 中，我使用模型和 foreach 循环填充表格，如下所示:

<table id="tblGroup" class="table table-bordered">

<thead style="background: #eeeeee;">
    <tr>
        <th style="text-align: center;">ردیف</th>
        <th style="text-align: center;">نام</th>
        <th style="text-align: center;">تخصص</th>
        <th style="text-align: center;">سابقه</th>
        <th style="text-align: center;">حذف</th>
    </tr>
</thead>
 <tbody  style="text-align: center;">
@foreach (var item in Model)
{
    <input type="hidden" value="@item.Id" id="groupId"/>



        <tr id="idrow">


            <td >@(orderCounter++)</td>
            <td>@blSpecialist.Find(item.Sp_id).Name @blSpecialist.Find(item.Sp_id).Family</td>
            <td>@blSpecialist.Find(item.Sp_id).Specially</td>
            <td>@blSpecialist.Find(item.Sp_id).WorkYear</td>
            <td><a href="#"  id ="linkdelete"><i class="icon-remove"></i></a></td>

        </tr>


}
      </tbody>

我想在单击删除链接时删除一行。这是我的 JQuery，但它不起作用:

<script type="text/javascript">
$("#linkdelete").click(function (e) {
    $.ajax({
        url: "/Admin/DeleteGroup",
        data: { id: $('input#groupId').val() },
        //cache: false,
        //contentType: false,
        //processData: false,
        //mimeType: "multipart/form-data",
        type: "Post",
        dataType: "Json",
        success: function(result) {
            if (result.Success) {
                $("#idrow").remove();
            }
            eval(result.Script);
        },
        error: function() {
            alert("خطا!");
        }
    });
});

请帮我做到这一点。

Answer 1

向 anchor 标记添加 data-id 属性:

<a href="#" data-id="@item.Id" id ="linkdelete"><i class="icon-remove"></i></a>

您可以像这样删除行:

$("#linkdelete").click(function (e) {
    var obj = $(this); // first store $(this) in obj
    var id = $(this).data('id'); // get id of data using this 
    $.ajax({
        url: "/Admin/DeleteGroup",
        data: { id: id },
        //cache: false,
        //contentType: false,
        //processData: false,
        //mimeType: "multipart/form-data",
        type: "Post",
        dataType: "Json",
        success: function(result) {
            if (result.Success) {
                $(obj).closest("tr").remove(); // You can remove row like this
            }
            eval(result.Script);
        },
        error: function() {
            alert("خطا!");
        }
    });
});