.empty()Возвращает: jQuery
Описание: Удаляет все дочерние узлы из набора совпавших элементов из DOM.
Этот метод удаляет не только дочерние (и другие потомки) элементы, но и любой текст внутри набора совпавших элементов. Это связано с тем, что, согласно спецификации DOM, любая строка текста внутри элемента считается дочерним узлом этого элемента. Рассмотрим следующий HTML:
<div class="container"> <div class="hello">Hello</div> <div class="goodbye">Goodbye</div> </div>
Мы можем выбрать любой элемент для удаления:
$( ".hello" ).empty();
Это приведет к структуре DOM с удаленным текстом Hello:
<div class="container"> <div class="hello"></div> <div class="goodbye">Goodbye</div> </div>
Если у нас есть любое количество вложенных элементов внутри <div class="hello">, они также будут удалены.
Чтобы избежать утечек памяти, jQuery удаляет другие конструкции, такие как данные и обработчики событий из дочерних элементов, прежде чем удалить сами элементы.
Если вы хотите удалить элементы, не разрушая их данные или обработчики событий (чтобы их можно было добавить позже), используйте .detach() вместо этого.
Пример:
Удаляет все дочерние узлы (включая текстовые узлы) из всех абзацев
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>empty demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p>
Hello, <span>Person</span> <em>and person</em>.
</p>
<button>Call empty() on above paragraph</button>
<script>
$( "button" ).on( "click", function() {
$( "p" ).empty();
} );
</script>
</body>
</html> 
