从页面中删除行而不刷新页面答案

【问题标题】：Delete row from the page without refreshing the page从页面中删除行而不刷新页面
【发布时间】：2015-08-09 00:14:18
【问题描述】：

我使用这种方法从表中删除一行。我能够从数据库中删除该行并显示“状态”警报。但是我必须刷新页面才能从页面中删除该行。我该怎么办？

<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>

【问题讨论】：

你能给你提供 HTML 吗？
@Manashvi Birla，为什么需要使用 ajax 从 DOM 中删除元素？
以免页面刷新
stackoverflow.com/questions/170997/…
首先，删除操作是 POST，而不是 GET！根据您生成的查询字符串，btnDel 在字符串或数字中，而不是 html 元素，因此 $(btnDel) 将不起作用。显示表格中一行的 html

标签： javascript asp.net-mvc delete-row

【解决方案1】：

首先要做的事情（如果尚未完成，因为我只能看到您的部分 HTML）：您必须将 <tbody> 放入 <table> 元素中。

<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>

然后，修改DeleteRow 函数。您不能使用 btnDel 中的值访问任何元素，因为它不是任何元素的 id 或 class。但是您可以执行以下操作

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

查看工作中的fiddle

HTH

【讨论】：

【解决方案2】：

如果您的警报是正确的，那是因为它在您的承诺之内。 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>

【讨论】：

【解决方案3】：

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

<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>

这里我正在考虑使用"BindRowATList" 函数将数据绑定到ProtocolSummary 控制器中的网格。

【讨论】：

【解决方案4】：

我这样做的方法是为行设置一个 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>

此外，将删除函数保留在 $get 中。我不使用表格，也没有使用此逻辑进行删除。但是这个逻辑适用于更新（为具有 id 的元素添加和删除类）。希望能帮助到你。

【讨论】：