javascript - 创建自动自毁的 div 元素

Question

我有一个名为 gainGold() 的函数，它附加一个 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);
}