jQuery has a function intended only to remove the child elements from inside another element. The “empty()” method can be used directly on the object.
Consider the HTML code below.
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>
To remove all paragraphs inside the “myDiv” element just use the following code in jQuery.
1$("#myDiv").empty();
But how can we perform this same operation using only JavaScript?
Removing Child Elements from a DOM Node Using JavaScript
JavaScript allows the programmer to remove elements from a DOM node through various properties. Let’s learn how to do this removal using each of them.
innerHTML
One of these properties is “innerHTML”. It allows all of the element’s internal HTML to be replaced. Including to be replaced by an empty string, making the element in question empty.
To remove all child nodes inside the “myDiv” element use the following JavaScript.
1document.getElementById("myDiv").innerHTML = "";
Below you can see a complete example in HTML. Here we use a button to remove elements.
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
The “textContent” property can be used to replace all elements inside a node with an empty string.
Depending on the browser, using “textContent” may perform better than “innerHTML”.
1document.getElementById("myDiv").textContent = "";
Remove child elements using a loop (“lastChild”)
In the example below, we use the “while” loop to check if our element contains the first child. If true, it indicates that there is at least one child element inside the parent element, so the loop removes the last element. And the process is repeated.
Removing the last element using the “lastChild” property usually performs better than removing the first element utilizing the “firstChild” property.
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.removeChild(element.lastChild);
4}
Remove child elements using a loop (“lastElementChild”)
Here we will achieve the same result, but preserving “non-Elements” such as text nodes “#text” and comments “<!– comments –>”.
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.removeChild(element.lastElementChild);
4}
Another feature of “lastElementChild” is to preserve child nodes within the parent element that are not direct descendants.
For example, consider the structure of elements below.
1Parent element
2|
3 — First node
4| |
5| — Node 1
6| |
7| — Node 2
8|
9 — Second node
When using “lastElementChild”, the “First node” and “Second node” would be removed. “Node 1” and “Node 2” would not be removed.
Remove child elements with the “remove” method
1const element = document.getElementById("myDiv");
2while (element.firstChild) {
3 element.lastChild.remove();
4}
The “remove” function was added in ES5. It has a simpler and more direct chaining syntax. It already has excellent support in many browsers .
Remove elements with the “replaceChildren” method
There is also the possibility to remove child elements from a DOM node using the “replaceChildren” API. This method allows you not only to remove elements from within a parent element but also to replace them with other elements in just one operation.
To just remove the child elements, call the API without any arguments.
1const element = document.getElementById("myDiv");
2element.replaceChildren();
The “replaceChildren” API is already well supported among modern browsers .