jquery how to remove the first x div's?

i an trying to remove the fi开发者_高级运维rst 4 divs if i click a button:

<div class="test">
<div class="1"></div>
<div class="1"></div>
<div class="1"></div>
<div class="1"></div>
<div class="1"></div>
<div class="1"></div>
</div>

i;ve tried this, but it seems to remove them one by one:

if ($('.test').find('.1').size() >= 4) {
$('.test').find('.1').remove();
}

thanks

Use the :lt() selector.

$('.test').find('.1:lt(4)').remove();

Demo: http://jsfiddle.net/mattball/kR3wL/

N.B. "1" is not a valid class.

Use the :lt selector

$('div.1:lt(4)', 'div.test').remove()

Example: http://jsfiddle.net/JD6CY/