How to clear the content of a div using JavaScript?

Javascript Web Development Front End Technology

We will learn to remove all child elements or content of a div element using JavaScript. However, whatever method we learn to clear the div element's content will work with any HTML element.

Removing the content of the div element is useful when users want to display some HTML content based on a particular condition or want to replace HTML content.

Here, we will explore three approaches to clear the content of a div using JavaScript.

Using the replaceChildren() Method

The replaceChilderen() method allows developers to replace child elements of a particular HTML element. So, we can create new child elements in JavaScript and pass them as a parameter of the replaceChildren() method to replace the content of the div.

If we replace the content of the div element with an empty string, we can clear the content of the div element. So, we will invoke the replaceChildren() method without passing any HTML element as a parameter.

Syntax

Users can follow the syntax below to use the replaceChildren() method.

div.replaceChildren();

In the above syntax, div is an HTML element for which we wanted to clear the HTML content.

Example

In the example below, we have created the div element and added some HTML content. After that, we invoke the clearDiv() function when the user presses the button. The clearDiv() function accesses the div element using id. It invokes the replaceChildren() method by taking the div element as a reference to clear all the content of the div element.

<html>
<head>
   <style>
      div {
         font-size: 2rem;
         height: 100px;
         width: 600px;
         border-radius: 20px;
         padding: 20px;
         border:1px solid black
      }
   </style>
</head>
<body>
   <h2>Using the <i>replaceChildren()</i> method to clear the div element using JavaScript</h2>
   <div id = "divElement">
      Hello Users! <br> How are you?
   </div><br>
   <button onclick="clearDiv()">Clear all content of div</button>
   <script>
      let output = document.getElementById('output');
      function clearDiv() {
         // access the div element and use the replaceChildren() method to clear the div content
         let div = document.getElementById("divElement");
         div.replaceChildren();
      }
   </script>
</body>
</html>

Using the removeChild() method and firstChild() property of the HTML Element

The removeChild() method allows removing child elements of a particular HTML element in JavaScript. Also, we will use the firstChild property of the HTML element to check if the HTML element contains any child element.

We will invoke a while loop until the HTML element firstChild element property contains some value, and we will remove the first child using the removeChild() method in the while loop.

Syntax

Users can follow the syntax below to use the firstChild property and removeChild() method to clear all content of the div element.

while (divElement.firstChild) {
   divElement.removeChild(divElement.firstChild);
}

In the above syntax, divElement is the targeted HTML div element to clear the content.

Example

In the example below, the div element contains the three elements with <p> tag, which are the child elements of the div element.

The below example calls the removeChild() function when the user clicks the button. In the removeChild() function, we have accessed the div element. After that, we used the while loop, firstChild property, and removeChild() method, as shown in the above syntax, to clear the content of the child element.

<html>
<head>
   <style>
      div {
         font-size: 1rem;
         height: 120px;
         width: 600px;
         padding: 20px;
         border: 1px solid black
      }
   </style>
</head>
<body>
   <h3>Using the removeChild() method and firstChild property of HTML element to clear the div element using JavaScript </h3>
   <div id = "divElement">
      <p>This is a first child element of Div!</p>
      <p>This is a second child element of Div!</p>
      <p>This is a third child element of Div!</p>
   </div><br>
   <button onclick = "removeContent()"> Remove Content </button>
   <script>
      let output = document.getElementById('output');
      function removeContent() {
         let divElement = document.getElementById("divElement");
         while (divElement.firstChild) {
            divElement.removeChild(divElement.firstChild);
         }
      }
   </script>
</body>
</html>

Using the innerHTML Property

We can replace the HTML of any HTML element using the innerHTML property via JavaScript. When we assign an empty string as a value of innerHTML property, it clears all content of any HTML element, including the div element.

Syntax

Users can follow the syntax below to use the innerHTML property to clear the content of the div element.

element.innerHTML = "";

Example

In the example below, the div element contains only text. We have added the click event listener to the button element. So, when the user clicks the button, it will invoke a callback function that will clear the content of the div element using the innerHTML property.

<html>
<head>
   <style>
      div {
         font-size: 1rem;
         background-color: lightgreen;
         color: darkblue;
         height: 100px;
         width: 600px;
      }
   </style>
</head>
<body>
   <h2>Using the <i>inerHTML property</i> to clear the div element usingJavaScript</h2>
   <div id = "divElement">
      This is a sample div element.
   </div><br>
   <button id = "clearButton"> Remove Content </button>
   <script>
      let output = document.getElementById('output');
      let button = document.getElementById('clearButton');
      button.addEventListener('click', () => {
         let element = document.querySelector('div');
         element.innerHTML = "";
      })
   </script>
</body>
</html>

In this tutorial, users learned to clear the content of the div element using the various method and elements. The easiest and shortest way to use the innerHTML property.