jQuery метод .empty()

Определение и применение

jQuery метод .empty() удаляет все дочерние узлы (детей и потомков) и содержимое у выбранных элементов.

Обращаю Ваше внимание, что метод .empty() не удаляет сам элемент, или его атрибуты. Чтобы удалить элемент из дерева DOM вы можете воспользоваться следующими методами:

.detach() - удаляет выбранные элементы из дерева DOM, но сохраняет данные и события (элемент можно восстановить при необходимости).
.remove() - удаляет выбранные элементы из дерева DOM и не сохраняет данные и события.

jQuery синтаксис:

$(selector).empty() // этот метод не принимает никаких параметров.

Добавлен в версии jQuery

1.0

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .empty()</title>
		<style>p {
border: 1px solid green; /* сплошная граница зеленого цвета размером 1 пиксель */	
}
</style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "button" ).click(function(){ // задаем функцию при нажатиии на элемент <button>
	    $( "p" ).empty(); // удаляем все дочерние узлы и содержимое у элементов <p>
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<p>Р<span>а</span>з</p>
		<p>Два</p>
		<p>Три</p>
	</body>
</html>

В этом примере с использованием jQuery метода .empty() мы удаляем все дочерние узлы и содержимое элементов <p> при нажатии на кнопку.

Результат нашего примера:

Пример использования jQuery метода .empty()

jQuery DOM методы