jquery - 在一定数量后删除 DIV 的子级

Question

我有这个 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>

如何使用 jQuery 从此 HTML 中删除第二个第三个和第四个 Div...

Answer 1

您正在寻找 :nth-child: http://api.jquery.com/nth-child-selector/

它的工作原理如下:

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

请注意，:nth-child 使用基于一个的索引，因此第一个元素的索引为 1。

更新:为了回答这个问题，OP 在评论中发布了

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...

答案是肯定的，为此您需要 :gt: 选择器:http://api.jquery.com/gt-selector/

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

与 :nth-child 不同，:gt 使用从零开始索引，因此第一个元素的索引为 0。