创建div元素自动自毁

Question

我有一个叫gainGold()是append SA 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

它就在你的眼睛:)

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

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

    });