Removing Children of DIV after certain Number

Question

I have this HTML

<div class="control">
     <label class="">Label Here</label>
     <input type="text">
     <div class="ui-resizable"></div>
     <div class="ui-resizable-handle"></div>
     <div class="ui-resizable-handle ui-resizable-se"></div>
     <div style="display: inline;" class="delete"><span class="ui-icon ui-icon-closethick">close</span> </div>
     <div style="display: inline;" class="properties txtbox"><span class="ui-icon ui-icon-wrench">Properties</span></div>
</div>

How can i remove the second third and fourth Divs from this HTML using jQuery....

Answer 1

$('.controll>div:gt(1)').remove();

:gt selector will let you select which has index greater then 1 theese are 3. elements and more

here is example: http://jsfiddle.net/Am7Vw/1/

Answer 2

You're looking for :nth-child: http://api.jquery.com/nth-child-selector/

It works like this:

$('.control div:nth-child(2), .control div:nth-child(3), .control div:nth-child(4)').remove();

Note that :nth-child uses one-based indexing, so the first element has index 1.

UPDATE: In response to this question the OP posted in a comment

If i dont know how many divs will occur after the input field is there any way to CUT or SLICE all the divs or any elements that occur after the second child of the Control DIV...

The answer is yes, for this you want the :gt: selector: http://api.jquery.com/gt-selector/

$('.control div:gt(1)').remove()

As opposed to :nth-child, :gt uses zero-based indexing, so the first element has index 0.