Главная страница   /   7.6. Удаление элементов (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

7.6. Удаление элементов

В дополнение к возможностям вставлять и заменять элементы, jQuery предлагает набор методов, которые можно использовать для удаления элементов из DOM. В таблице 7-6 описаны эти методы.

Таблица 7-6: Методы для удаление элементов
Метод Описание
detach()
detach(selector)
Удаляет элементы из DOM. Данные, связанные с элементами, сохраняются
empty() Удаляет все дочерние узлы каждого элемента в объекте jQuery
remove()
remove(selector)
Удаляет элементы из DOM. Когда элементы удаляются, данные, связанные с элементами, уничтожаются
unwrap() Удаляет родительский узел каждого элемента в объекте jQuery

В листинге 7-21 показано, как можно использовать метод remove для удаления элементов из DOM.

Листинг 7-21: Удаление элементов из DOM при помощи метода remove
<script type="text/javascript">
	$(document).ready(function () {
		$('img[src*=daffodil], img[src*=snow]').parent().remove();
	});
</script>

Этот скрипт выбирает элементы img, чьи src атрибуты содержат daffodil и snow, получает их родительские элементы, и затем удаляет их. Можно отфильтровать элементы, которые удаляются, если добавить селектор методу remove, как показано в листинге 7-22.

Листинг 7-22: Фильтрация элементов, которые нужно удалить, при помощи селектора
<script type="text/javascript">
	$(document).ready(function () {
		$('div.dcell').remove(':has(img[src*=snow], img[src*=daffodil])');
	});
</script>

Оба эти скрипта имеют одинаковый результат, как показано на рисунке 7-16.

Совет

По своему опыту работы с методом remove скажу, что не все селекторы могут быть фильтрами. Я советую заниматься тщательным тестированием и полагаться на внутреннюю выборку, где это возможно.

Рисунок 7-16: Удаление элементов из DOM

Совет

Объект jQuery, возвращенный методом remove, содержит исходный набор выбранных элементов. Другими словами, удаление элементов не отражается в результате метода.

Отсоединение элементов

Метод detach работает так же, как и метод remove, за исключением того, что данные, связанные с элементами, сохраняются. Я расскажу о связывании данных с элементами в главе 8, но для этой главы достаточно знать, что обычно лучше всего использовать этот метод, если вы собираетесь вставлять элементы где-нибудь в другом месте в документе. В листинге 7-23 показано, как используется метод detach.

Листинг 7-23: Использование метода detach для удаления элементов с сохранением связанных с ними данных
<script type="text/javascript">
	$(document).ready(function () {
		$('#row2').append($('img[src*=astor]').parent().detach());
	});
</script>

Этот скрипт отсоединяет родительский элемент элемента img, чей src атрибут содержит astor. Затем элементы обратно вставляются в документ при помощи метода append, о котором я рассказал ранее в этой главе. Я стараюсь не использовать этот метод, потому что использование append без detach имеет тот же эффект. Можно переписать ключевое выражение в листинге следующим образом:

$('#row2').append($('img[src*=astor]').parent());

Результат работы скрипта можно увидеть на рисунке 7-17.

Рисунок 7-17: Использование метода detach

"Опустошение" элементов

Метод empty удаляет всех потомков и текст из элементов в объекте jQuery. Сами элементы остаются в документе, как видно из листинга 7-24.

Листинг 7-24: Использование метода empty
<script type="text/javascript">
	$(document).ready(function () {
		$('#row1').children().eq(1).empty().css("border", "thick solid red");
	});
</script>

В этом скрипте я выбираю дочерний узел элемента row1 с индексом 1 и вызываю метод empty. Чтобы сделать изменения более очевидными, я добавил рамку, используя метод css. Результат можно увидеть на рисунке 7-18.

Рисунок 7-18: Использование метода empty

Удаление родительских узлов

Метод unwrap удаляет родительские узлы элементов в объекте jQuery. Выбранные элементы становятся дочерними узлами своих "дедушек". В листинге 7-25 показано, как используется метод unwrap.

Листинг 7-25: Использование метода unwrap
<script type="text/javascript">
	$(document).ready(function () {
		$('#row1 div').unwrap();
	});
</script>

В этом скрипте я выбрал элементы div, которые являются потомками элемента с id равном row1, и вызвал метод unwrap. Результатом этого стало удаление элемента row1, как показано на рисунке 7-19. Видны сильные изменения в выравнивании элементов, потому что определенные мной в каскадной таблице стилей стили CSS опираются на элементы row1 для поддержки на странице сеточной верстки (grid layout).

Рисунок 7-19: Использование метода unwrap