Справочник API
.empty() в jQuery
Содержание статьи
-
Категории: Manipulation › DOM Removal
Полностью удаляет все содержимое (все дочерние узлы, включая текстовые) всех элементов в наборе jQuery.
Синтаксис и описание:
Добавлено в jQuery 1.0.empty( )
Метод .empty() удаляет все дочерние узлы каждого элемента набора — не только вложенные элементы, но и текстовые узлы (текст внутри тега тоже является дочерним узлом DOM). Сам элемент, на котором вызван .empty(), остаётся в документе — очищается только его содержимое.
Перед удалением jQuery снимает данные (
.data()) и обработчики событий, навешенные через jQuery, у всех удаляемых потомков рекурсивно, чтобы избежать утечек памяти. Этим .empty() отличается от прямой записи.html("")или нативногоinnerHTML = "", которые физически убирают узлы, но сами по себе не отвечают за корректную очистку jQuery-данных потомков.
Возвращаемое значение: (объект) Набор jQuery — тот же, без потомков, для продолжения цепочки.
Примечание:
.empty() — разрушающая операция: если содержимое понадобится вставить обратно, дочерние элементы нужно сначала отсоединить методом .detach(), а не очищать .empty().
Примечание:
Метод .html("") визуально даёт тот же результат (пустой элемент): под капотом он тоже очищает потомков перед записью нового содержимого. .empty() просто явно выражает намерение «очистить», без записи нового HTML.
В jQuery 3.x и 4.0:
Метод не менялся, работает без изменений в 3.7.1 и 4.0. Нативный аналог —
element.replaceChildren()без аргументов (поддерживается всеми современными браузерами) либо более старый способ через цикл сremoveChild. Подробнее о том, что можно делать без jQuery — в статье jQuery и обычный JavaScript.
Примеры:
Очистить контейнер перед вставкой новых результатов поиска.
$('#results').empty(); $('#results').append(renderResults(data));Очистить сразу несколько блоков.
$('.widget-body').empty();Нативный аналог.
document.querySelector('#results').replaceChildren();