How to clear all div’s content inside a parent div in JavaScript?

Javascript Web Development Front End Technology

Using JavaScript, we will learn to clear all div’s content inside a parent div. In HTML, we can create various <div> elements and add other <div> elements as a child of the parent div.

Also, we can add different HTML to every child <div> element. Sometimes, we may require to clear the HTML of all child <div> elements. So, we will learn different approaches to clear all div’s content inside a parent div.

Using the innerHTML property of the HTML element

Every HTML element contains the innerHTML property. Developers can use it to set the HTML for any element using JavaScript. We can access the element in JavaScript and assign an empty string as a value of the innerHTML property to clear the content of all div elements inside a parent div.

Syntax

Users can follow the syntax below to use the innerHTML property to clear all div’s content inside a parent div.

let parentElement = document.getElementById('parentElement');     
parentElement.innerHTML = "";

In the above syntax, we have accessed the div element using id.

Example

In the below example, we have created the div element with the id ‘parentElement’. Also, we have added the 4 div’s as a child div of the parent div with the class name ‘childElement’.

In JavaScript, we accessed the parent element by its id, used the innerHTML property, and assigned the empty string as its value.

<html>
<body>
   <h3>Using the <i>innerHTML property</i> to clear the content of all divs of the parent div element</h3>
   <div id = "parentElement">
      <div class = "childElement"> This is the child 1! </div>
      <div class = "childElement"> This is the child 2! </div>
      <div class = "childElement"> This is the child 3! </div>
      <div class = "childElement"> This is the child 4! </div>
   </div></br>
   <button onclick = "clearParent()"> Clear the parent's content </button>
   <script>
      let parentElement = document.getElementById('parentElement');
      function clearParent() {
         parentElement.innerHTML = "";
      }
   </script>
</body>
</html>

In the above output, users can observe that when they click, the button clears the content of all divs of the parent div element.

Use the empty() method of JQuery

The empty() method removes the child element from the parent element. We can access the HTML element using jQuery and invoke the empty() method by taking it as a reference to clear all its child elements.

Syntax

Users can follow the syntax below to use the empty() method to clear the content of all child elements.

$('#parentElement div').empty();

In the above syntax, parentElement is an id of the parent div.

Example

In the example below, we have used jQuery. The parent div contains the two child div elements. When a user clicks the button, it invokes the clearContent() button. In the clearContent() button, we have accessed the parent element by its id using the jQuery and invoked the empty() method. So, when the user clicks the button, it removes the content of child div elements.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
   Integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
   crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
</head>
<body>
   <h3>Using the <i>empty() method of JQuery</i> to clear the content of all divs of the parent div element </h3>
   <div id = "parentElement">
      <div class = "childElement"> This is the child 1! </div>
      <div class = "childElement"> This is the child 2! </div>
   </div></br>
   <button onclick = "clearContent()"> Clear content </button>
   <script>
      function clearContent() {
         $('#parentElement div').empty();
      }
   </script>
</body>
</html>

Use the html() method of jQuery

The html() method in jQuery is the same as the innerHTML property of the elements in JavaScript. Developers can set the HTML for any element using the html() method when they use jQuery.

The html() method takes the html in the string format as a parameter. Here, we will pass an empty string to remove all content of all child divs of parent div.

Syntax

Users can follow the syntax below to use the html() method of jQuery.

$('#div-parent').html('');

In the above syntax, ‘div-parent’ is the id of the parent element.

Example

In this example, we have added the click event listener on the button using jQuery. When users click the button, it will invoke the callback function, which uses the html() method to clear the content of div elements.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
   Integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
   crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
</head>
<body>
   <h3>Using the <i> html()</i> method of jQuery to clear content of all divs of parent div element</h3>
   <div id = "div-parent">
      <div> Hi Everyone! </div>
      <div> Welcome to the TutorialsPoint to learn JavaScript! </div>
   </div></br>
   <button id = "btn"> Remove content </button>
   <script>
      $('#btn').click((event) => {
         $('#div-parent').html('');
      })
   </script>
</body>
</html>

In this tutorial, users learned three approaches to clear the content of all divs of the parent div element. Also, users can use the text() method of the jQuery to remove the text by passing the empty string as a parameter.