Question

我有一个名为gainGold()的函数，append是父元素的div元素，如下所示：

function gainGold() {
    $('#main').append('<div class="popup popup-gold">+ 14</div>');
}

在完整版中，数字当然是可变的，还有更多，但我会保持这个简单。这个元素在0.5秒内播放css动画，我想让它在之后被销毁。到目前为止，我已经用setTimeout这样做了：

setTimeout(function(){
    $('.popup-gold').remove();
}, 510);

但这是不好的做法。使用此解决方案，我无法同时看到多个popup个元素，因为jQuery选择器会在删除时将所有元素作为目标。

有没有办法创建这个div元素并保持对它的严格控制，只是单独删除（）它？

编辑：This is a Jsfiddle that demonstrates the solution.我最终使用了Robs答案，将每个附加元素声明为变量并将其干净地删除。谢谢！

Answer 1

您应该保存对要追加删除的对象的引用...

function gainGold() {
    var popup = $('<div class="popup popup-gold">+ 14</div>');
    $('#main').append(popup);

    setTimeout(function(){
        popup.remove();
    }, 510);
}

Answer 2

它就在你眼前:) http://api.jquery.com/animate/

$( ".popup-gold" ).animate({

    left: "+=50",
    }, 5000, function() {
    $(this).remove();

    });

创建自动自毁的div元素

2 个答案: