jquery - 使用 jquery 删除 tr 标签后向上滑动剩余的 tr 标签

Question

我正在使用 jquery ajax 实现删除功能。我能够删除记录并删除tr代表该记录的记录。现在我想为我的代码添加一点味道，所以我尝试让tr下面的幻灯片向上滑动以替换被删除的位置，tr如下所示：

 function () {
    tr.fadeOut('slow', function () {
        tr.remove();
    }).promise().done(function () {
        tr.nextAll("tr").slideUp();
 });

但是slideUp动画不起作用，所有tr被删除的都消失了然后重新出现以替换被删除的位置，请看看并告诉我我做错了什么。这是完整的jquery：

$(document).ready(function () {    
    $("body").on("click", ".waiting", function (event) {
        event.preventDefault();        
        var tr = $(this).closest("tr");
        $.ajax({
            type: "POST",
            beforSend: function () { $("#waiting").show(); },
            url: $(this).attr("href"),
            data: { "id": $(this).attr("id") },
            success: function () {
                        tr.fadeOut('slow', function () {
                            tr.remove();
                        }).promise().done(function () {
                            tr.nextAll("tr").slideUp();
                     });
            },
            complete: function () { $("#waiting").hide(); }
        });
    });
})

Answer 1

您要删除的元素会淡出然后消失，这会导致跳跃效果，您应该slideUp在要删除的元素上使用。它会向上滑动、消失，并将所有内容都带到它下面。

tr.slideUp('slow').remove();