在Ajax调用后HTML表将不会更新

Question

我正在使用Ajax从“角色”表中删除一行。 我可以添加角色，并允许用户从每一行的链接中删除角色。 该函数可以工作并删除数据库中的行，但事件发生后表不会更新。 该行似乎从未被删除。 我需要重新加载视图吗？ 不确定如何刷新屏幕以仅反映剩余的行。

 <div id="roleTable"> <table class="table"> <tr><th>Role</th><th>Description</th><th>Delete</th></tr> @{int count = 0;} @foreach (var b in ViewBag.roles) { string color = ""; if (count % 2 == 0) { color = ""; } else { color = "success"; } count++; <tr class=@color id="roleRow-@b.RoleGUID"> <td>@b.Role</td> <td>@b.Description</td> <td><a href="#" class="removeLink" data-id="@b.RoleGUID" onclick="return confirm('Are you sure');">Remove</a></td> </tr> } </table> </div> <p id="result"> </p> 

jQuery代码：

 <script> $("#roleTable").on("click",".removeLink", function () { var roleToDelete = $(this).attr("data-id"); if (roleToDelete != '') { $.post("/UserRoles/RemoveRole", { "RoleGUID": roleToDelete }, function (data) { $("#roleRow-" + roleToDelete).fadeOut('slow'); $("#result").text(data.Message).fadeOut(5000); }); } }); </script> 

Answer 1

您需要fadeOut单元格而不是该行。 您可以在fadeOut之后删除该行，但是如果要使用淡入淡出效果，则必须使用如下所示的内容：

$("#roleRow-" + roleToDelete + " td").fadeOut('slow');

这个问题可能会帮助您达到所需的确切效果。

Answer 2

只需调用此代码

$("#roleRow-" + roleToDelete).remove();

代替

$("#roleRow-" + roleToDelete).fadeOut('slow');

Answer 3

感谢大家的建议。 完成建议后对我有用的代码是：

  $('#roleRow-'+roleToDelete).closest('tr').remove(); 

由于某种原因，对$（this）的调用无法正常工作，需要使用$（'＃roleRow-'+ roleToDelete）