Javascript 完成动画后分离并移动元素

我有一个项目列表，每个项目都有一个关闭按钮。单击后，动画播放，列表向上滑动，项目成功删除

$(document).on("click", ".close-button", function(e) { //removes with animation
    $(this).parent().animate({
        opacity: 0
    }, 250, function() {
        $(this).animate({
                marginBottom: 0
            }, 250)
            .children()
            .animate({
                padding: 0
            }, 250)
            .wrapInner("<div />")
            .children()
            .slideUp(250, function() {
                $(this).closest(".element").remove();
            });
    });
});

---

我当然想保留动画，但我就是不知道如何在保留动画的同时分离而不是删除它们。任何帮助都将不胜感激。

当您为父级设置动画时

此

指的是动画元素。因此，关闭按钮的参考丢失

存储当前元素的元素引用以及以后对目标的使用

$(document).on("click", ".close-button", function (e) { 
    //Store the reference
    var $this= $(this);
    $(this).parent().animate({
        opacity: 0
    }, 250, function () {
        $(this).animate({
            marginBottom: 0
        }, 250)
        .children()
        .animate({
            padding: 0
        }, 250)
        .wrapInner("<div />")
        .children()
        .slideUp(250, function () {
            $this.closest('.element').prependTo('#diff-view').hide().slideDown(250)
        });
    }); 
});

$（文档）。在（“单击”，“关闭”按钮）上，函数（e）{
//存储引用
var$this=$（this）；
$（this）.parent（）.animate({
不透明度：0
}，250，函数（）{
$（此）。设置动画({
marginBottom:0
}, 250)
.儿童（）
.制作动画({
填充：0
}, 250)
.wrapInner（“”）
.儿童（）
.slideUp（250，函数（）{
$this.closest（'.element'）.prependTo（'#diff view'）.hide（）.slideDown（250）
});
}); 
});

删除是否有效？@Satpal刚刚对其进行了注释以进行检查。没有视觉上的差异，但我检查了文件，显然它不起作用。。。html仍然存在，只是隐藏起来了。我不是awareOk，我理解现在必须存储引用，但它仍然没有将元素移动到另一个视图。它使用

.remove（）

删除，这很好。如果没有所有的动画，我无法理解prepending是如何工作的，但这里没有…我在

.prependTo（）

前面使用了

.clone（）

，它可以工作。使用

clone（）

而不是

.detach（）

会丢失引用，但稍后我们将查看这是否有任何影响。

$(document).on("click", ".close-button", function (e) { 
    //Store the reference
    var $this= $(this);
    $(this).parent().animate({
        opacity: 0
    }, 250, function () {
        $(this).animate({
            marginBottom: 0
        }, 250)
        .children()
        .animate({
            padding: 0
        }, 250)
        .wrapInner("<div />")
        .children()
        .slideUp(250, function () {
            $this.closest('.element').prependTo('#diff-view').hide().slideDown(250)
        });
    }); 
});