jQuery метод .detach()

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

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

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

jQuery синтаксис:

$(selector).detach()

С дополнительным фильтром:

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

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

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

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

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button>
<p>Раз</p>
<p>Два</p>
<p>Три</p>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        $('p').detach()
    })
})

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