jQuery имеет функцию, предназначенную только для удаления дочерних элементов внутри другого элемента. Метод «empty()» можно использовать непосредственно на объекте.
Рассмотрим приведенный ниже HTML-код.
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Lorem ipsum dolor sit amet</title>
5</head>
6<body>
7 <div id="myDiv">
8 <p>First paragraph</p>
9 <p>Second paragraph</p>
10 <p>Third paragraph</p>
11 <p>Fourth paragraph</p>
12 </div>
13 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
14</body>
15</html>
Чтобы удалить все абзацы внутри элемента «myDiv», просто используйте следующий код в jQuery.
1$("#myDiv").empty();
Но как мы можем выполнить ту же операцию, используя только JavaScript?
Удаление дочерних элементов из узла DOM с помощью JavaScript
JavaScript позволяет программисту удалять элементы из узла DOM с помощью различных свойств. Давайте узнаем, как сделать это удаление, используя каждый из них.
innerHTML
Одним из таких свойств является «innerHTML». Это позволяет заменить весь внутренний HTML-код элемента. В том числе для замены пустой строкой, что делает рассматриваемый элемент пустым.
Чтобы удалить все дочерние узлы внутри элемента «myDiv», используйте следующий код JavaScript.
1document.getElementById("myDiv").innerHTML = "";
Ниже вы можете увидеть полный пример в HTML. Здесь мы используем кнопку для удаления элементов.
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Removing HTML elements using innerHTML</title>
5 <meta charset="utf-8">
6</head>
7<body>
8 <div id="myDiv" style="border: 3px dashed red; margin-bottom: 20px;">
9 <p>First paragraph</p>
10 <p>Second paragraph</p>
11 <p>Third paragraph</p>
12 <p>Fourth paragraph</p>
13 </div>
14
15 <button id='removeElements'>Remove paragraphs (innerHTML)</button>
16
17 <script>
18 const button = document.getElementById("removeElements");
19 button.onclick = function () {
20 document.getElementById("myDiv").innerHTML = "";
21 };
22 </script>
23</body>
24</html>
textContent
Свойство textContent можно использовать для замены всех элементов внутри узла пустой строкой.
В зависимости от браузера использование «textContent» может работать лучше, чем «innerHTML».
1document.getElementById("myDiv").textContent = "";
Удалить дочерние элементы с помощью цикла («lastChild»)
В приведенном ниже примере мы используем цикл «while», чтобы проверить, содержит ли наш элемент первый дочерний элемент. Если это правда, это указывает, что внутри родительского элемента есть по крайней мере один дочерний элемент, поэтому цикл удаляет последний элемент. И процесс повторяется.
Удаление последнего элемента с использованием свойства lastChild обычно работает лучше, чем удаление первого элемента с использованием свойства firstChild.
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.removeChild(element.lastChild);
4}
Удалить дочерние элементы с помощью цикла («lastElementChild»)
Здесь мы добьемся того же результата, но сохраним «не-Элементы», такие как текстовые узлы «#text» и комментарии «<!– comments –>».
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.removeChild(element.lastElementChild);
4}
Другая особенность «lastElementChild» заключается в сохранении дочерних узлов внутри родительского элемента, которые не являются прямыми потомками.
Например, рассмотрим структуру элементов ниже.
1Parent element
2|
3 — First node
4| |
5| — Node 1
6| |
7| — Node 2
8|
9 — Second node
При использовании «lastElementChild» «First node» и «Second node» будут удалены. «Node 1» и «Node 2» не будут удалены.
Удалить дочерние элементы методом «remove»
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.lastChild.remove();
4}
Функция «remove» была добавлена в ES5. Он имеет более простой и прямой синтаксис цепочки. Он уже имеет отличную поддержку во многих браузерах .
Удалить элементы методом «replaceChildren»
Существует также возможность удалить дочерние элементы из узла DOM с помощью API replaceChildren. Этот метод позволяет не только удалять элементы из родительского элемента, но и заменять их другими элементами всего за одну операцию.
Чтобы просто удалить дочерние элементы, вызовите API без аргументов.
1const element = document.getElementById("myDiv");
2element.replaceChildren();
API «replaceChildren» уже хорошо поддерживается современными браузерами .