title: Create div elements that automatically self-destruct
body: <p>I have a function called <code>gainGold()</code> that <code>append</code>s a div Element to a parent like this:</p>
  
  <pre><code>function gainGold() {
      $('#main').append('&lt;div class="popup popup-gold"&gt;+ 14&lt;/div&gt;');
  }
  </code></pre>
  
  <p>In the full version, the number is of course variable and there's some more to it, but i'll keep this simple. This element plays a css animation over 0.5 seconds, and i want it to be destroyed afterwards. So far, i've done that with a <code>setTimeout</code> like this:</p>
  
  <pre><code>setTimeout(function(){
      $('.popup-gold').remove();
  }, 510);
  </code></pre>
  
  <p>But this is bad practice. With this solution, i can't have multiple <code>popup</code> elements visible at once, since the jQuery selector targets all of them when removing.</p>
  
  <p>Is there some way to create this div element and maintain tight control over it to just remove() it individually?</p>
  
  <p>Edit: <a href="http://jsfiddle.net/x0wco7db/7/" rel="nofollow"><strong>This is a Jsfiddle that demonstrates the solution.</strong></a> I've ended up using Robs answer, declaring each appended element as a variable and removing it cleanly. Thanks!</p>