Skip to content
Related Articles

Related Articles

Remove all the child elements of a DOM node in JavaScript
  • Last Updated : 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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :