Delete old divs if there are more than 20 | jQuery

Question

I need some help with my jQuery script. I have a page that refreshes every 10 seconds and new divs from a feed are getting appended at.

My script counts the divs and removes the last div when there are more than 20 divs. This works fine if the feed just appends 1 div at a time. But the feed can also append multiply divs at the same time. When this happens the count can exceed the max of 20 divs. The problem with this is that my script just deletes 1 div and not all the divs that exceed the 20 count.

This is my code:

var $auto_refresh = setInterval(function () {
    var $articleCount = $('div').length; 

    if ($articleCount > 20) {
        $('div:last-child').remove();
    }

    $autoUpdate();
}, 10000); // refresh every 10000 milliseconds for new items

I need to remove all extra divs so there are always 20 divs. I hope someone can help me out with this.

Answer 1

Use jQuery.slice to get everything past number 20, and bin them - dead easy :)

var $auto_refresh = setInterval(function () {
    $('div').slice(20).remove();
    $autoUpdate();
}, 10000); // refresh every 10000 milliseconds for new items

http://api.jquery.com/slice/

Answer 2

var $auto_refresh = setInterval(function () {
    var $articleCount = $('div').length; 

    while ($articleCount > 20) {
        $('div:last-child').remove();
        $articleCount = $('div').length;
    }

    $autoUpdate();
}, 10000);

Notice the change of if to while . This keeps deleting the last one until there are 20.

Answer 3

You could use .slice(x) to remove all elements from index x and on: http://jsfiddle.net/PLKAm/ .

$("div").slice(20).remove();

If there are <= 20 items then .slice(20) returns an empty set, so the code is a no-op automatically.

Answer 4

Using the greater than selector:

var $auto_refresh = setInterval(function () {

    $('div:gt(20)').remove();

    $autoUpdate();
}, 10000); // refresh every 10000 milliseconds for new items

Answer 5

var $auto_refresh = setInterval(function () {

    while ($('div').length > 20) {
        $('div:last-child').remove();
    }

    $autoUpdate();
}, 10000); // refresh every 10000 milliseconds for new items

Answer 6

while ($articleCount > 20) {            
        $('div:last-child').remove();
        $articleCount = $('div').length;
    }

Answer 7

Edited for simplicity:

$('div').each(function(count){
    if(count >= 20){
        $(this).remove();
    }
});

Answer 8

You could use the :gt() selector to find the elements in one fell swoop.

var $auto_refresh = setInterval(function () {
    var nToDelete = $('div').length - 20; // Calculate how many there are to delete...    
    if(nToDelete > 0) $('div:gt(" + nToDelete + ")').remove(); // and delete them.
    $autoUpdate();
}, 10000);

Answer 9

var remove21 = function() {
    if ($('div').length > 20) {
        $('div:nth-child(21)').remove();
        remove21();
    }
}

var $auto_refresh = setInterval(function () {

    remove21();

    $autoUpdate();
}, 10000); // refresh every 10000 milliseconds for new items