創建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(); 

    });