Question

i have this html:

<div class="test">
   <div class="itsme">1</div>
   <div class="itsme">2</div>
   <div class="itsme">3</div>
   <div class="itsme">4</div>
</div>

and i am adding a new div dynamically with an ajax call at the top of div1.

var count = jQuery('div.itsme').size();
if(count > 3){
   $('.test').find("div:last").remove();
}

this works in a way that if i add one div , the last one gets removed, but it doesn’t really keeps track of how many divs.

Even if there are 10 divs in the beginning , once i add another one the last one gets removed.

Why i am looking for is there to be always, in this case, 3 divs displayed. If i add another div then the last one gets removed, if i add 2 divs then the last 2 get removed

i hope i am clear enough.

thanks,

p.s. I am using size() because lenght() doesn’t seem to work, chrome see it as an undefined function, and i checked, i have jquery 1.7..

Answer 1

if($('.itsme').length > 3){
   $('.itsme:gt(2)').remove();
}

FIDDLE