제거 동적으로 생성 된 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에 없습니다. 즉, 부모 이벤트를 수신하거나 처리기를 연결해야하는지 잘 모르겠습니다. 아이디어가 있으십니까? 여기

는 바이올린 예입니다

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

Answer 1

문제는 항상 DOM의 마지막 요소가 아니라 마지막으로 볼 수있는 요소를 페이드 아웃되는 것입니다. 마찬가지로, 당신은 항상 같은 요소를 퇴색시키고 있습니다.

$(".child:visible:last").fadeOut(); 트릭해야합니다. (JSFiddle에서 작동했습니다.) :visible 셀렉터가 추가되었습니다.

Anant가 제안한 또 다른 옵션은 DOM을 단순히 페이드 아웃하는 대신 DOM에서 제거하는 것입니다. 이는 달성하려는 것이 무엇인지에 달려 있습니다. DOM에 남아 있기 위해 엘리먼트가 필요 없다면 아마도 엘리먼트를 제거하는 것이 좋다. .

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