jQuery hat eine Funktion, die nur dazu bestimmt ist, die untergeordneten Elemente aus einem anderen Element zu entfernen. Die Methode „empty()“ kann direkt auf das Objekt angewendet werden.
Betrachten Sie den folgenden HTML-Code.
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>
Um alle Absätze innerhalb des „myDiv“-Elements zu entfernen, verwenden Sie einfach den folgenden Code in jQuery.
1$("#myDiv").empty();
Aber wie können wir dieselbe Operation nur mit JavaScript ausführen?
Entfernen von untergeordneten Elementen aus einem DOM-Knoten mit JavaScript
JavaScript ermöglicht es dem Programmierer, über verschiedene Eigenschaften Elemente aus einem DOM-Knoten zu entfernen. Lassen Sie uns lernen, wie Sie diese Entfernung mit jedem von ihnen durchführen.
innerHTML
Eine dieser Eigenschaften ist „innerHTML“. Es ermöglicht das Ersetzen des gesamten internen HTML des Elements. Einschließlich der Ersetzung durch eine leere Zeichenfolge, wodurch das betreffende Element leer wird.
Um alle untergeordneten Knoten innerhalb des „myDiv“-Elements zu entfernen, verwenden Sie das folgende JavaScript.
1document.getElementById("myDiv").innerHTML = "";
Unten sehen Sie ein vollständiges Beispiel in HTML. Hier verwenden wir eine Schaltfläche, um Elemente zu entfernen.
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
Mit der Eigenschaft „textContent“ können alle Elemente innerhalb eines Knotens durch einen leeren String ersetzt werden.
Je nach Browser kann die Verwendung von „textContent“ besser abschneiden als „innerHTML“.
1document.getElementById("myDiv").textContent = "";
Untergeordnete Elemente mit einer Schleife entfernen („lastChild“)
Im folgenden Beispiel verwenden wir die „while“-Schleife, um zu prüfen, ob unser Element das erste untergeordnete Element enthält. Wenn es wahr ist, gibt es an, dass es mindestens ein untergeordnetes Element innerhalb des übergeordneten Elements gibt, sodass die Schleife das letzte Element entfernt. Und der Vorgang wiederholt sich.
Das Entfernen des letzten Elements mit der Eigenschaft „lastChild“ ist normalerweise besser als das Entfernen des ersten Elements mit der Eigenschaft „firstChild“.
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.removeChild(element.lastChild);
4}
Untergeordnete Elemente mit einer Schleife entfernen („lastElementChild“)
Hier erzielen wir das gleiche Ergebnis, behalten aber „Nicht-Elemente“ wie Textknoten „#text“ und Kommentare „<!– comments –>“ bei.
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.removeChild(element.lastElementChild);
4}
Eine weitere Funktion von „lastElementChild“ besteht darin, untergeordnete Knoten innerhalb des übergeordneten Elements beizubehalten, die keine direkten Nachkommen sind.
Betrachten Sie beispielsweise die Struktur der Elemente unten.
1Parent element
2|
3 — First node
4| |
5| — Node 1
6| |
7| — Node 2
8|
9 — Second node
Bei Verwendung von „lastElementChild“ würden „First node“ und „Second node“ entfernt. „Node 1“ und „Node 2“ würden nicht entfernt.
Entfernen Sie untergeordnete Elemente mit der Methode „remove“.
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.lastChild.remove();
4}
Die Funktion „remove“ wurde in ES5 hinzugefügt. Es hat eine einfachere und direktere Verkettung Syntax. Es wird bereits von vielen Browsern hervorragend unterstützt .
Entfernen Sie Elemente mit der Methode „replaceChildren“.
Es besteht auch die Möglichkeit, mit der „replaceChildren“-API Kindelemente aus einem DOM-Knoten zu entfernen. Mit dieser Methode können Sie nicht nur Elemente aus einem übergeordneten Element entfernen, sondern sie auch durch andere Elemente in nur einem Vorgang ersetzen.
Um nur die untergeordneten Elemente zu entfernen, rufen Sie die API ohne Argumente auf.
1const element = document.getElementById("myDiv");
2element.replaceChildren();
Die „replaceChildren“-API wird von modernen Browsern bereits gut unterstützt .