Question

.post is the class of elements which also have an unique id such as “c1”, “c14” etc (representing the post count on the page).

The code below will be part of an ajax call which regularly pulls new posts while also checking the current amount of posts on the page. Should the amount exceed 5, the older posts are removed.

Posts to be removed will have the smallest ids. How could I select them? Or would there be a better method of selecting the older messages (which are in bottom, similar to youtube).

var postcount = $(".post").length;

while(postcount > 5){
$("#c" + divtoremove).fadeOut(1000);
}

<div class="post" id="c6">Post 6</div>
<div class="post" id="c5">Post 5</div>
<div class="post" id="c4">Post 4</div>
<div class="post" id="c3">Post 3</div>
<div class="post" id="c2">Post 2</div>
<div class="post" id="c1">Post 1</div>

In this example “c1” should be removed. I can’t keep count of the elements, I need to recalculate it on each call since it got messed up when I tried to keep a count.

Answer 1

Pretty simple with a indexed selector filter:

$(".post:gt(4)").remove();