jQuery 在一定数量后删除 DIV 的孩子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9511770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing Children of DIV after certain Number
提问by HardCode
I have this HTML
我有这个 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....
如何使用 jQuery 从这个 HTML 中删除第二个、第三个和第四个 Div....
回答by Ben Lee
You're looking for :nth-child: http://api.jquery.com/nth-child-selector/
您正在寻找: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-childuses one-basedindexing, so the first element has index 1.
请注意，:nth-child使用基于一个的索引，因此第一个元素的索引为 1。
UPDATE: In response to this question the OP posted in a comment
更新：为了回答这个问题，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...
如果我不知道在输入字段之后会出现多少个 div，是否有任何方法可以剪切或切片所有 div 或在 Control DIV 的第二个子项之后出现的任何元素...
The answer is yes, for this you want the :gt:selector: http://api.jquery.com/gt-selector/
答案是肯定的，为此您需要:gt:选择器：http: //api.jquery.com/gt-selector/
$('.control div:gt(1)').remove()
As opposed to :nth-child, :gtuses zero-basedindexing, so the first element has index 0.
与 相反:nth-child，:gt使用从零开始的索引，因此第一个元素的索引为 0。
回答by Sudhir Bastakoti
Try:
尝试：
$('.control').find("div").slice(1, 4).remove();
回答by draconis
$('.controll>div:gt(1)').remove();
:gtselector will let you select which has index greater then 1 theese are 3. elements and more
:gt选择器将让您选择索引大于 1 的那些是 3. 元素和更多
here is example: http://jsfiddle.net/Am7Vw/1/
这是示例：http: //jsfiddle.net/Am7Vw/1/
回答by Don Zacharias
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.
如果您的意思是位置 2-4 的 div，无论标记如何，nth-child()答案之一都会起作用。
回答by Dips
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();
