Pro jQuery

Адам Фриман

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

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

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

<script type="text/javascript">
	$(document).ready(function () {
		$('img[src*=daffodil], img[src*=snow]').parent().remove();
	});
</script>

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

<script type="text/javascript">
	$(document).ready(function () {
		$('div.dcell').remove(':has(img[src*=snow], img[src*=daffodil])');
	});
</script>

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

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

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

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

<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.

<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

Подписаться

или RSS канал: