jQuery метод .detach()

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

jQuery метод .detach() удаляет выбранные элементы из дерева DOM. Метод .detach() удаляет выбранные элементы, включая текстовые и дочерние узлы, но сохраняет данные и события. Этот метод также сохраняет копию удаленных элементов, что позволяет восстановить их при необходимости.

Обращаю Ваше внимание, что если Вам необходимо удалить элементы, данные и события, то воспользуйтесь методом .remove(), а если Вам необходимо удалить только данные, то используйте метод .empty().

jQuery синтаксис:

$(selector).detach()

С дополнительным фильтром:
$("p").detach(":contains('Два')") // выбирает абзацы, которые содержат текст Два

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

1.4

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .detach()</title>
		<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" ).detach(); // удаляем все элементы <p> из DOM
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<p>Раз</p>
		<p>Два</p>
		<p>Три</p>
	</body>
</html>

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

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

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

jQuery DOM методы