Javascript 从页面中删除行而不刷新页面

我使用此方法从表中删除一行。我可以从数据库中删除该行，并显示“状态”警报。但是我必须刷新页面以从页面中删除行。我该怎么办

<script type="text/javascript">
function DeleteRow(btnDel) {
    $.get('../ProtocolSummary/DeleteRowATList?id2=' + btnDel, function(data, status){
      alert("Status: " + status);
    });
    $(btnDel).closest("tr").remove();
}
</script>



***Html***


<tbody>
            <% var ATRowId = 0; foreach (var item in Model.List)
               {%>
        <tr style="text-align:center">
            <td><%=Html.TextAreaFor(m => m.List[RowId].Type, new { value = @Model.List[ATRowId].Type, @style = "width:260px;" })%>
                <%=Html.HiddenFor(x=>x.List[RowId].AssistiveId,Model.ATList[RowId].AssistiveId) %></td>
            <td><%=Html.TextAreaFor(m => m.List[RowId].Schedule, new { value = @Model.List[ATRowId].Schedule, @style = "width:260px;" })%></td>
            <td><%=Html.TextAreaFor(m => m.List[RowId].Storage, new { value = @Model.List[ATRowId].Storage, @style = "width:260px;" })%></td>
            <td style="width:50px"><input type="button" value="delete" class="btnDel" style="float:right;width:20px" onclick="DeleteRow(<%= item.AssistiveId%>)" /></td>
        </tr>
               <% ATRowId++;
               }%>
            </tbody>

函数DeleteRow（btnDel）{
$.get（'../ProtocolSummary/DeleteRowATList？id2='+btnDel，函数（数据，状态）{
警报（“状态：+状态”）；
});
$（btnDel）.tr.remove（）；
}
***Html***
m、 List[RowId].Type，新的{value=@Model.List[ATRowId].Type，@style=“width:260px；”}）%>
x、 列表[RowId].AssistiveId，Model.ATList[RowId].AssistiveId）%>
m、 List[RowId].Schedule，新的{value=@Model.List[ATRowId].Schedule，@style=“width:260px；”}）%>
m、 列表[RowId]。存储，新的{value=@Model.List[ATRowId]。存储，@style=“width:260px；”}）%%>

我认为删除后，您正在将数据再次绑定到表/网格。所以你可以这样做：

<script type="text/javascript">
function DeleteRow(btnDel) {
$.get('../ProtocolSummary/DeleteRowATList?id2=' + btnDel, function(data, status){
    if(status=="active")
    {
       $.get('../ProtocolSummary/BindRowATList',function(data){
         alert("Data had bind to the grid");
       });                                             
    }
 $(btnDel).closest("tr").remove();
});

}
</script>

函数DeleteRow（btnDel）{
$.get（'../ProtocolSummary/DeleteRowATList？id2='+btnDel，函数（数据，状态）{
如果（状态=“活动”）
{
$.get（'../ProtocolSummary/BindRowATList'，函数（数据）{
警报（“数据已绑定到网格”）；
});                                             
}
$（btnDel）.tr.remove（）；
});
}

---

在这里，我正在考虑使用

“BindRowATList”

函数将数据绑定到

协议摘要

控制器中的网格。

如果您得到了正确的警报，那是因为它在您的承诺之内。jQuery返回一个承诺（回调），您试图在AJAX运行之前删除tr

我不确定您的DOM将如何正确获得，但我相信它是正确的

<script type="text/javascript">
function DeleteRow(btnDel) {
    $.get('../ProtocolSummary/DeleteRowATList?id2=' + btnDel, function(data, status){
      alert("Status: " + status);

      //Now I can be deleted as I'm inside the promise
      $(btnDel).closest("tr").remove();
    });    
}
</script>

函数DeleteRow（btnDel）{
$.get（'../ProtocolSummary/DeleteRowATList？id2='+btnDel，函数（数据，状态）{
警报（“状态：+状态”）；
//现在我可以被删除，因为我在承诺之内
$（btnDel）.tr.remove（）；
});    
}

我这样做的方法是为行设置一个id，并将其传递给delete函数

<tr id="rowId">
   <!-- some html -->
   <button type="button" class="deleteRow" onclick="DeleteRow('rowId')">Delete Row</button>
</tr>
<script>
function DeleteRow(rowId) {
    $.get('../ProtocolSummary/DeleteRowATList?id2=' + rowId, function(data, status){
      alert("Status: " + status);
      $("#"+rowId).remove();
    });    
}
</script>

删除行
函数DeleteRow（rowId）{
$.get（'../ProtocolSummary/DeleteRowATList？id2='+rowId，函数（数据，状态）{
警报（“状态：+状态”）；
$（“#”+rowId）.remove（）；
});    
}

另外，将remove函数保持在$get内。 我不使用表，也没有使用此逻辑进行删除。但是这种逻辑用于更新（为id为的元素添加和删除类）。希望能有帮助

第一件事（如果还没有完成，因为我只能看到HTML的一部分）：必须将

放入

元素中

<table>
    <tbody>
        <tr style="text-align:center">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td style="width:50px">
                <input type="button" value="delete" class="btnDel" style="width:20px" onclick="DeleteRow(1)" />
            </td>
        </tr>
    </tbody>
</table>

看到工作了吗

---

HTH

你能提供HTML吗？@Manashvi birla，为什么需要使用ajax从DOM中删除元素？这样可以避免页面刷新。首先，删除操作是一个帖子，而不是一个GET！根据您生成的查询字符串，

btnDel

以字符串或数字形式，而不是html元素，因此

$（btnDel）

将不起作用。显示表格中一行的html

function DeleteRow(btnDel) {
    var btn = event.target;
    $(btn).closest("tr").remove();
}