Delete old divs if there are more than 20 | JQuery

Question

I need help with my jQuery script. I have a page that refreshes every 10 seconds, and new divs from the feed are added to.

My script counts the div and removes the last div when there are more than 20 divs. This works great if the feed simply adds 1 div at a time. But the feed can also add multiple divs at the same time. When this happens, the counter can exceed a maximum of 20 divs. The problem is that my script just removes 1 div, and not all divs that exceed 20.

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 additional divs, so there are always 20 divs. Hope someone can help me with this.

Answer 1

 var $auto_refresh = setInterval(function () { var $articleCount = $('div').length; while ($articleCount > 20) { $('div:last-child').remove(); $articleCount = $('div').length; } $autoUpdate(); }, 10000); 

Notice the change in if to while . This will delete the last until there are 20.

Answer 2

Use jQuery.slice to get all past number 20, and bean them is 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 3

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

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

If there is <= 20 items, then .slice(20) returns an empty set, so the code does not work automatically.

Answer 4

Using the selector more :

 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 can use the :gt() selector to find 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