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

在这个局部视图中，我用

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>

ردیف
نام
تخصص
سابقه
حذف
@foreach（模型中的var项目）
{
@（orderCounter++）
@blSpecialist.Find（item.Sp_id）.Name@blSpecialist.Find（item.Sp_id）.Family
@blSpecialist.Find（项目Sp_id）。特别
@blSpecialist.Find（item.Sp_id）.工作年
}

我想在单击删除链接时删除一行。 这是我的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("خطا!");
        }
    });
});

$（“#链接删除”）。单击（函数（e）{
$.ajax({
url:“/Admin/DeleteGroup”，
数据：{id:$（'input#groupId'）.val（），
//cache:false，
//contentType:false，
//processData:false，
//mimeType：“多部分/表单数据”，
类型：“Post”，
数据类型：“Json”，
成功：功能（结果）{
如果（结果、成功）{
$（“#idrow”）.remove（）；
}
eval（result.Script）；
},
错误：函数（）{
警惕（“طا！”）；
}
});
});

---

请帮助我完成此操作。

将数据id属性添加到锚定标记：

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

---

只有将类作为单击事件选择器放置在id的位置，才能实现相应的行删除。。 我已经修改了你的代码来实现这一点

HTML:

---

Shayan jan您可以这样做：
-使用

class

代替

id

作为锚链（id是唯一的选择器）。

硬编码行的工作示例：

---

1.使用等级代替锚链的id

使用.on（）方法而不是.click（）方法，并将代码放入$（document）.ready（）事件处理程序中

$（文档）.ready（函数（）{
$（'body'）在（'click'，'.linkdelete'，函数（e）上{
$.ajax({
url:“/Admin/DeleteGroup”，
数据：{id:$（'input#groupId'）.val（），
//cache:false，
//contentType:false，
//processData:false，
//mimeType：“多部分/表单数据”，
类型：“Post”，
数据类型：“Json”，
成功：功能（结果）{
如果（结果、成功）{
$（“#idrow”）.remove（）；
}
eval（result.Script）；
},
错误：函数（）{
警惕（“طا！”）；
}
});
});
});

Duplicate

id

属性是无效的html（在

、

`和

元素中）。用类名替换它们，并使用

$（this.closest（'tr'）.remove（）获取关联行@stephen$（this）在ajax成功中无法访问，我们首先需要在ajax之前将$（this）存储到一个变量中，然后我们可以使用该变量
$（'input#groupId'）访问$（this）。val（）
将返回第一个输入的值：）如何返回我选择的行的值？？？@shayantalaei，您需要使用类名和相对选择器（重复的
id
属性是无效的html）
$("#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("خطا!");
        }
    });
});

 <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    
        <td> @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="#"  class ="linkdelete"><i class="icon-remove"></i></a>     </td>

    </tr>


  }
  </tbody>

 $(".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) {
            $(this).closest("tr").remove(); // You can remove row like this
        }
        eval(result.Script);
    },
    error: function() {
        alert("خطا!");
    }
 });
});

$("#tblGroup").on("click" , ".linkdelete" ,(function () {
   var tr = $(this).closest('tr');
   var id = tr.prev().val();


  alert("id: " + id);
  //remove below line in your code it is just for example
  tr.remove();
  data = { id: id };
  console.log("data =>" , data);
  $.ajax({
        url: "/Admin/DeleteGroup",
        data: data ,
        //cache: false,
        //contentType: false,
        //processData: false,
        //mimeType: "multipart/form-data",
        type: "Post",
        dataType: "Json",
        success: function(result) {
            if (result.Success) {
                tr.remove(); // You can remove row like this
            }
            eval(result.Script);
        },
        error: function() {
            alert("خطا!");
        }
    });
  });
 })