Remove all the child elements of a DOM node in JavaScript
Child elements are the nested elements in the HTML and we have to remove them. To remove the elements in HTML we need to use DOM methods.
There are so many ways to remove the child elements of a DOM node:
Table of Content
- Using removeChild()
- Using innerHTML property
Using removeChild()
In this approach, we are using the HTML DOM removeChild() method, which will remove a specified child node of the given element. We select an element by the use of the querySelector getting the last element of that selected element and removing that with the help of the removeChild() method.
Example: This example shows the implementation of the above-explained approach.
html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <ul> <li>Get Up in Morning</li> <li>Do some exercise</li> <li>Get Ready for school</li> <li>Study Daily</li> <li>Do homework</li> </ul> <input id="btn" type="button" value="Remove Childrens"></body><script> function deleteChild() { let e = document.querySelector("ul"); //e.firstElementChild can be used. let child = e.lastElementChild; while (child) { e.removeChild(child); child = e.lastElementChild; } } let btn = document.getElementById( "btn").onclick = function () { deleteChild(); } </script></html> |
Output:
Output
Using innerHTML property
In this appraoch, we are using HTML DOM innerHTML property that helps us to get the content of the selected elemnet. We are selecting the element that we want to remove and craeting an eventListener of onclick. When the button will be clicked the event will occur and it will remove all the content of that selected element by setting `innerHTML=””`.
Example: This example shows the implementation of the above-explained approach.
html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> Document </title></head><body> <ul> <li>Get Up in Morning</li> <li>Do some exercise</li> <li>Get Ready for school</li> <li>Study Daily</li> <li>Do homework</li> </ul> <input id="btn" type="button" value="Remove Childrens"></body><script> function deleteChild() { let e = document.querySelector("ul"); e.innerHTML = ""; } let btn = document.getElementById( "btn").onclick = function () { deleteChild(); } </script></html> |
Output:
Output
Contact Us