jquery: select all elements after nth

Question

Hi,

I have x number of <div> and I need to select all after n.

<div class=foo>4:00</div>
<div class=foo>5:00</div>
<div class=foo>6:00</div>
<div class=foo>7:00</div>
<div class=foo>8:00</div>

For example, given n=3 and div.foo, remove all div.foo after the 3rd div.foo would yield:

<div class=foo>4:00</div>
<div class=foo>5:00</div>
<div class=foo>6:00</div>

Thanks

Answer 1

$('.foo:gt(2)').remove();

Try it out: http://jsfiddle.net/MYY9m/

This uses the greater-than selector to select all elements who's index is greater than the number provided.

• http://api.jquery.com/gt-selector/

Answer 2

Not as elegant as Patrick DW's solution, but this also works:

$('.foo').eq(2).nextAll().remove();

See http://api.jquery.com/nextAll/

Answer 3

You can also do:

$('.foo').slice(3).remove();

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