How to clear the content of a div using JavaScript?

JavaScript provides the functionality of clearing the content of div. There are two methods to perform this function, one by using innerHTML property and other by using firstChild property and removeChild() method.

Method 1: Using innerHTML Property: The DOM innerHTML property is used to set or return the HTML content of an element. This method set the innerHTML property to none.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Clear the content of a div
        using JavaScript
    </title>
      
    <style>
        #clear {
            background-color:#006600;
            color:white;
            padding-top:50px;
            opacity:0.7;
            width : 400px;
            height:250px;
            border-radius:10%;
            text-align:center;
        }
    </style>
      
    <!-- Script to use DOM innerHTML property
        to clear the content -->
    <script>
        function clearcontent(elementID) {
            document.getElementById(elementID).innerHTML = "";
        }
    </script>
</head>
   
<body>
    <div id= "clear">
        <form>
            <label>Enter first number</label><br>
            <input type = "number" placeholder = "Enter number"
                    name = "input1" min = "0"/>
              
            <br><br>
              
            <label>Enter Second number</label><br>
            <input type = "number" placeholder = "Enter number" 
                    name = "input2" min = "0"/>
              
            <br><br>
              
            <label>
                Click on button to find sum of prime numbers
            </label><br>
            <button value = "find sum" type = "submit" 
                    onclick = "clearcontent('clear')">
                find sum
            </button><br>
        </form>
    </div>
</body>
  
</html>

chevron_right


Output:



  • Before Clicking the button:
  • After Clicking the button:

Method 2: Using firstChild property and removeChild() method: The DOM firstChild property is used to return the firstchild Node of its parent node element. It is read-only property and does not return a text node and a comment node. The removeChild() method is used to remove a specified child node of the given element. It returns the removed node as a node object or null if the node doesn’t exist. This method uses firstChild property to return the first child and removeChild() method uses to remove the content of first child.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Clear the content of a div
        using JavaScript
    </title>
      
    <style>
        #clear {
            background-color:#006600;
            color:white;
            padding-top:50px;
            opacity:0.7;
            width : 400px;
            height:250px;
            border-radius:10%;
            text-align:center;
        }
    </style>
      
    <!-- Script to use DOM firstChild property and
        removeChild method to clear the content -->
    <script>
        function clearBox(elementID) {
            var div = document.getElementById(elementID);
              
            while(div.firstChild) {
                div.removeChild(div.firstChild);
            }
        }
    </script>
</head>
   
<body>
    <div id= "clear">
        <form>
            <label>Enter first number</label><br>
            <input type = "number" placeholder = "Enter number"
                    name = "input1" min = "0"/>
              
            <br><br>
              
            <label>Enter Second number</label><br>
            <input type = "number" placeholder = "Enter number" 
                    name = "input2" min = "0"/>
              
            <br><br>
              
            <label>
                Click on button to find sum of prime numbers
            </label><br>
            <button value = "find sum" type = "submit" 
                    onclick = "clearcontent('clear')">
                find sum
            </button><br>
        </form>
    </div>
</body>
  
</html>

chevron_right


Output:

  • Before Clicking the button:
  • After Clicking the button:


My Personal Notes arrow_drop_up

I am a quick learner and eager to learn new technologies

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.