title: Remove Last occurance of dynamically created div
body: <p>I have a div that I want to be able to add children to the top and remove child elements from the bottom from dynamically. Kinda like a rss ticker.
  The parent div is constantly populated with new children.
  There is a condition to test for the number of children, and then remove the last child once it reaches the max desired length of children.
  This is done with a setInterval() to be continuous. </p>
  
  <pre><code>setInterval(function(){
      var newbox = "&lt;div class='child  animated bounceInDown'&gt;&lt;/div&gt;"
      $(newbox).prependTo('#container').hide().slideDown(500);
      var dlength = $('.child').length;
      console.log(dlength);
  
      if (dlength &gt;=5){
          $(".child:last").fadeOut();
       }
  }, 2000);
  </code></pre>
  
  <p>Currently with my code, I can remove the last child div by using a counter populated with the max desired length of the parent div. </p>
  
  <p>The problem is that it only removes the last div during the first interval. 
  I log the count to the console and can see the count increment, so my condition should trigger.</p>
  
  <p>My thought is that my problem is due to no event delegation. Essentially, the div isn't in the DOM when I try to remove it. That being said, I'm not sure if I need to listen for events on the parent or attach a handler.
  Any ideas?</p>
  
  <p>Here is a fiddle example:</p>
  
  <p><a href="http://jsfiddle.net/luskbo/tcq8kuy6/9/" rel="nofollow noreferrer">http://jsfiddle.net/luskbo/tcq8kuy6/9/</a></p>