Removing Children of DIV after certain Number

Answer 1

You can do this

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

Or you can do this as well

$('.control div:nth-child(1)').siblings().remove();

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.

Answer 3

$('.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 4

If you mean those specific ones:

$(".ui-resizable-handle, .delete").remove();

If you mean the divs at positions 2-4 no matter the markup, one of the nth-child() answers would work.

Answer 5

Try:

$('.control').find("div").slice(1, 4).remove();