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

【问题标题】：Remove Last occurance of dynamically created div删除最后一次出现的动态创建的 div
【发布时间】：2017-03-01 17:26:39
【问题描述】：

我有一个 div，我希望能够将子元素添加到顶部并从底部动态删除子元素。有点像 RSS 自动收报机。父 div 不断填充新的子元素。有一个条件来测试孩子的数量，然后在达到孩子的最大期望长度时移除最后一个孩子。这是通过 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);

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

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

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

这是一个小提琴的例子：

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

【问题讨论】：

更新了正确的小提琴链接^
$('#container .child').eq($('#container .child').length - 1).remove(); 看看这个

标签： jquery setinterval event-delegation

【解决方案1】：

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

$(".child:visible:last").fadeOut(); 应该是诀窍。（它在 JSFiddle 中工作）添加了 :visible 选择器。

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

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

【讨论】：

谢谢！这正是我一直在寻找的。 Anant 的答案很接近，但没有我试图实现的淡出。