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

我正在使用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="[email protected]">
            <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>

最佳答案

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

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

This question可能会帮助您实现所需的确切效果。