2010-08-03 2 views
16

У меня есть макет, как это:Удаление элементов детей с учетом индекса?

<div id='parent'> 

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

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

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

    ... 

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

В какой-то момент, я хочу, чтобы удалить все Див «строк» ​​выше определенного индекса, например:

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

есть более простой способ сделать это в jquery? Что-то вроде «просто удалите всех детей, начиная с индекса N»?

(выше цикл не будет действительно работать, но это вид, что я буду делать, если нет другого пути)

ответ

21

«Просто удалить (снять) все дети #parent, начиная с элемента N» :

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

Если элементы не будут повторно использовать remove() вместо detach() для того, чтобы сбросить данные и события, связанные с удаленными элементами.

+0

+1 - Это единственный ответ, который, по-видимому, делает то, что хочет OP (удаляет элементы, расположенные над данным индексом и выше). Хотя, я бы использовал только '.detach()', если вы собираетесь ссылаться на них и повторно вставлять, или если вы уверены, что есть * нет * прикрепленных данных. – user113716

+0

... это также единственный ответ, который гарантирует, что учитываются только прямые потомки. – user113716

+0

@patrick, я бы использовал remove(), а вместо detach()? Мне больше не нужны ссылки на удаленные divs, и некоторые из их детей (элементы в каждой строке div) будут иметь> данные <в нем. – user246114

8

Чтобы удалить строки 0 и 1 выберите строки меньше, чем 2, используя lt selector и затем remove им:

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

О, мне нужно удалить строки, превышающие индекс, - это одна и та же операция, просто замените «lt» на «gt»? – user246114

+0

@ user246114 Да. http://api.jquery.com/gt-selector/ – Adam

+1

Еще одна вещь: если вы хотите удалить элемент с известным индексом, используйте 'eq'. Документация [здесь] (http://api.jquery.com/eq-selector/). –

4

Это старый нить, но мне любопытно * почему никто не упомянул nth-child.

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

* Обновление: У меня не было достаточно респ знать это в то время, но имело место nth-child ответ, удален.

Смежные вопросы