Для чего используется .detach() в jQuery?

Удаляет элементы набора jQuery из DOM дерева, но с сохранением их jQuery-связей (обработчиков событий и хранимых данных).

.detach() в jQuery

Категории: Manipulation › DOM Removal

Удаляет элементы набора jQuery из DOM дерева, но с сохранением их jQuery-связей (обработчиков событий и хранимых данных).

Добавлено в jQuery 1.4.detach( [ selector ] )
Метод .detach() убирает элементы набора из документа так же, как .remove(), с одним важным отличием: данные, сохранённые через .data(), и обработчики событий, навешенные через .on(), сохраняются и продолжают работать, когда элемент возвращают в DOM. .remove() же перед удалением очищает эти данные и обработчики, чтобы не создавать утечек памяти, — это делает его непригодным, если элемент планируется вставить обратно.
Типичный паттерн — «вынуть, изменить, вставить обратно»: сохранить набор в переменную, поработать с ним вне DOM, затем вернуть через .appendTo() и подобные методы, не теряя навешенные обработчики.

Возвращаемое значение: (объект) Набор jQuery, отсоединённый от DOM, с сохранёнными данными.

selector – (строка, необязательно) сузить набор до элементов, подходящих под селектор, перед отсоединением.

Примечание:
Пока элемент отсоединён, он не отображается на странице и недоступен через document.querySelector, но остаётся обычным JS-объектом — с ним можно менять атрибуты, классы и т.д. вне DOM.
Примечание:
Селектор-параметр применяется как фильтр к уже вызванному набору: $(...).detach('.hidden') отсоединит только те элементы набора, что подходят под .hidden.
В jQuery 3.x и 4.0:
Метод не менялся, работает без изменений в 3.7.1 и 4.0. Нативного метода с тем же поведением нет: element.remove() тоже физически убирает узел из DOM, но проблема потери данных актуальна именно для того, что зарегистрировано через jQuery API (.data(), .on()), — обработчики через addEventListener jQuery не трогает в любом случае.

Временно вынуть таблицу для массовых правок и вернуть обратно.
```
var $table = $('#big-table').detach();
$table.find('tr').addClass('touched');
$table.appendTo('#container');
```
Отсоединить только часть набора по селектору.
```
var $removed = $('.card').detach('.card--archived');
```

После .detach() обработчик, навешенный через .on(), продолжает работать.

var $btn = $('#save').detach();
$btn.appendTo('#toolbar');
$btn.trigger('click'); // обработчик сработает как ни в чём не бывало