Remove all the child elements of a DOM node in JavaScript - GeeksforGeeks

16 Apr, 2019
Child nodes can be removed from a parent with removeChild(), and a node itself can be removed with remove().Another method to remove all child of a node is to set it’s innerHTML=”” property, it is an empty string which produces the same output. This method is not preferred to use.
Example-1: Using “removeChild()”.
<!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() {        var e = document.querySelector("ul");                //e.firstElementChild can be used.        var child = e.lastElementChild;         while (child) {            e.removeChild(child);            child = e.lastElementChild;        }    }    var btn = document.getElementById(    "btn").onclick = function() {        deleteChild();    }</script>  </html>
Output:Before Clicking on Button:After Clicking on Button:
Example-2: Using innerHTML=”” property.
<!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() {        var e = document.querySelector("ul");        e.innerHTML = "";    }    var btn = document.getElementById(      "btn").onclick = function() {        deleteChild();    }</script>  </html>
Output:Before Clicking on Button:After Clicking on Button:
Example-3 Using “removeChild()”.
<!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() {        var e = document.querySelector("ul");        var first = e.firstElementChild;        while (first) {            first.remove();            first = e.firstElementChild;        }    }    var btn = document.getElementById(      "btn").onclick = function() {        deleteChild();    }</script>  </html>
Output:Before Clicking on Button:After Clicking on Button:
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?