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发表了评论

如果我不知道在输入字段出现后会发生多少div 任何方式CUT或SLICE所有div或之后发生的任何元素 Control DIV的第二个孩子......

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

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

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

Answer 2

尝试：


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

Answer 3

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

:gt选择器可让您选择哪个索引大于1，这些是3.元素和更多

这里是示例：http://jsfiddle.net/Am7Vw/1/

Answer 4

如果你的意思是那些特定的：

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

如果你指的是2-4位的div，无论是什么标记，nth-child()个答案之一都可以。

Answer 5

你可以这样做

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

或者你也可以这样做

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

一定数量后去除DIV儿童

5 个答案: