削除ダイナミックに作成されたdivの最後の出現

Question

私は上部に子を追加し、下部から子要素を動的に削除したい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内にdivがありません。それは、私は親のイベントを聞く必要があるか、ハンドラを添付する必要があるかどうかはわかりません。 アイデアここで

はフィドル例です。

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

Answer 1

問題は、あなたが常にDOMの最後の要素ではなく、最後の目に見える要素をフェードアウトされています。つまり、あなたは常に同じ要素を退色させています。

$(".child:visible:last").fadeOut();（これはJSFiddleで動作しました）:visibleセレクタが追加されました。

もう1つの選択肢は、Anantの示唆しているように、要素をフェードアウトするのではなく、DOMから削除することです。これは達成したいことに依存します。要素をDOMに残す必要がない場合は、削除することをお勧めします。 。

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