Методы remove() и empty()

В последней паре глав мы работали с добавлением новых элементов на страницу, но, разумеется, jQuery может и удалять их. Для этого есть два основных метода: remove() и empty(). Метод remove() удаляет выбранный элемент, а empty() удаляет все дочерние элементы. Следующий пример иллюстрирует разницу - только нажимайте ссылки в правильном порядке:

<a href="javascript:void(0);" onclick="$('#divTestArea1').empty();">empty() div</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea1').remove();">remove() div</a>
<div id="divTestArea1" style="height: 100px; width: 300px; padding: 20px; border: 1px solid silver; background-color: #eee;">
	<b>Bold text</b>
	<i>Italic text</i>
</div>

Первая ссылка вызывает метод empty() на нашем тестовом div, удаляя все его дочерние элементы. Вторая ссылка удалит весь div целиком, включая дочерние элементы, если они есть Очень просто.

У метода remove() есть один дополнительный параметр, который позволяет фильтровать элементы, которые следует удалить, используя любой селектор jQuery. Вы, разумеется, можете получить тот же результат, применив фильтр к своему первому селектору, но в некоторых ситуациях вы можете работать на наборе уже отфильтрованных элементов. Проверьте следующий пример:

<a href="javascript:void(0);" onclick="$('#divTestArea2 b').remove('.more');">remove() more bold</a>
<div id="divTestArea2" style="height: 100px; width: 300px; padding: 20px; border: 1px solid silver; background-color: #eee;">
	<b>Bold text</b><br />
	<b class="more">More bold text</b><br />
	<b class="more">Even more bold text</b><br />
</div>

Мы начинаем с того, что выбираем все теги b внутри нашего тестового div. Затем мы вызываем remove() на выбранных элементах и передаем ему фильтр на .more, который выбирает только те элементы, у которых задан класс "more". В результате удаляются только два элемента b.

Разумеется, можно использовать и более сложные селекторы. Обратитесь к теме "Селекторы" для поисков вдохновения.