Removing children from the DIV after a certain number

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 to remove second third and fourth divs from this HTML using jQuery ....

+8
jquery jquery-ui
source share
5 answers

Try:

 $('.control').find("div").slice(1, 4).remove();
$('.control').find("div").slice(1, 4).remove(); 
+6
source share

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

It works as follows:

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

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

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

If I do not know how many divs will occur after entering the field in any way CUT or SLICE of all divs or any elements that occur after the second child DIV control ...

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

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

Unlike :nth-child :gt uses indexing with a zero index, so the first element has index 0.

+12
source share
 $('.controll>div:gt(1)').remove(); 
Selector

:gt will let you choose which has an index greater than 1, these are 3. elements and much more

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

+4
source share

If you mean those specific ones:

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

If you mean divs in positions 2-4, regardless of layout, one of the nth-child() answers will work.

0
source share

You can do it

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

Or you can also do it

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

All Articles