根据索引删除子元素？

Question

我有一个如下的布局：

<div id='parent'>

    <div id='row_0'></div>

    <div id='row_1'></div>

    <div id='row_2'></div>

    ... 

    <div id='row_N'></div>
</div>

在某个时刻，我想要删除所有在特定索引之上的 div “rows”，例如：

for (var index = 1; index < $('#parent').children.length; index++) {
    $('#parent').remove('#row_' + index);
}

有没有更简单的jQuery方法来做这件事？类似于“只需从索引N开始删除所有子元素”这样的方法吗？

（上面的for循环实际上不起作用，但如果没有其他方法，我会这样做）

- user246114

Answer 1

"只需从元素N开始，移除（分离）#parent的所有子元素即可":

$("#parent").children().slice(N).detach();

如果元素不会再被重新插入，使用remove()替代detach()以丢弃与已删除元素相关的数据和事件。

- You

---

+1 - 这是唯一一个似乎能够做到 OP 想要的事情（删除给定索引处及以上的元素）的答案。尽管如此，如果您将保留对它们的引用并重新插入，或者您确定没有附加的 data，那么我只会使用 .detach()。 - user113716

这也是唯一确保只考虑直接后代的答案。 - user113716

@patrick，我应该使用remove()而不是detach()吗？我不再需要对已删除的div的引用，而且它们的一些子元素（每个行div中的元素）将包含>数据<。 - user246114

使用 remove() 方法。".detach() 方法与 .remove() 方法相同，只是 .detach() 方法会保留与已删除元素相关联的所有 jQuery 数据。当需要在稍后时间重新插入已删除元素时，此方法非常有用。" - http://api.jquery.com/detach/ - You

@user - 我所指的“数据”是jQuery直接关联元素的任何类型的信息。 当您附加事件处理程序，动画元素或直接附加自定义数据时，就会发生这种情况。 如果您使用.detach()，则不会清除所有这些数据。 如果您不确定，请使用.remove()。 这将删除所有数据，因此它不会不必要地持续存在。 - user113716

Answer 2

要删除第0行和第1行，请使用lt选择器选择小于2的行，然后删除它们：

$('#parent div:lt(2)').remove();

- Adam

---

哦，我需要删除大于某个索引的行 - 是相同的操作吗，只需将“lt”替换为“gt”？ - user246114

还有一件事：如果您想删除已知索引的元素，请使用 eq。文档在这里。 - Ionică Bizău

Answer 3

虽然这是一篇旧帖子，但我很好奇为什么没有人提到 nth-child 选择器。

$("#parent > div:nth-child(n + " + index + ")").remove();

*更新：当时我没有足够的声誉来知道这一点，但已经有一个nth-child答案被删除了。

- kojiro