删除动态创建的最后一次出现 div

Question

我有一个 div，我希望能够将 children 添加到顶部并从底部动态删除 child 元素。有点像 rss 自动收报机。 parent div 不断被新的 children 填充。有一个条件是测试 children 的数量，然后在达到最大所需长度 children 后删除最后一个 child。这是通过 setInterval() 连续完成的。

setInterval(function(){
    var newbox = "<div class='child  animated bounceInDown'></div>"
    $(newbox).prependTo('#container').hide().slideDown(500);
    var dlength = $('.child').length;
    console.log(dlength);

    if (dlength >=5){
        $(".child:last").fadeOut();
     }
}, 2000);

目前使用我的代码，我可以通过使用填充了 parent div 的最大所需长度的计数器来删除最后一个 child div。

问题是它只删除了第一个间隔中的最后一个 div。我将计数记录到控制台并可以看到计数增量，因此应该触发我的条件。

我的想法是我的问题是由于没有事件委托。本质上，当我尝试删除 div 时，它不在 DOM 中。话虽如此，我不确定我是否需要监听 parent 上的事件或附加处理程序。有什么想法吗？

这是一个 fiddle 示例：

http://jsfiddle.net/luskbo/tcq8kuy6/9/

Answer 1

问题是您总是淡出 DOM 中的最后一个元素，而不是最后一个可见元素。比如说，你总是在淡化同一个元素。

$(".child:visible:last").fadeOut(); 应该可以解决问题。（它在 JSFiddle 中有效）添加了 :visible 选择器。

Anant 建议的另一种选择是从 DOM 中删除元素，而不是将其淡出，这取决于您可能想要实现的目标。如果您不需要该元素保留在 DOM 中，也许删除它是一个好习惯。

$(".child:visible:last").fadeOut(400,function(){
  $(this).remove();
});

删除动态创建的最后一次出现 div

Remove Last occurance of dynamically created div

jquery

setinterval

event-delegation