How to clear the content of a div using JavaScript? Last Updated : 11 Jul, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report JavaScript provides the functionality of clearing the content of div. There are two methods to perform this function, one by using the innerHTML property and other by using the firstChild property and removeChild() method. Below are the approaches used to clear the content of a div using JavaScript: Table of Content Using innerHTML Property Using firstChild property and removeChild() methodMethod 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.firstChild property Example: In this example, we are using innerHTML Property html <!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> Output: Method 2: Using firstChild property and removeChild() methodThe 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. Example: In this example, we are using firstChild property and removeChild() method html <!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> Output: Comment More infoAdvertise with us Next Article How to empty the content of an element using AngularJS ? A AmanAgarwal6 Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to Load DIV Content on Click Only using JavaScript? To load content into a div when a button or any other element is clicked using JavaScript, you can follow these simple steps. You can either load static content or fetch data from an external source using AJAX (for more advanced usage). Below is a basic example to load content into a div when a butt 2 min read How to Clear all Cookies using JavaScript? Cookies allow clients and servers to exchange information via HTTP, enabling state management despite HTTP being a stateless protocol. When a server sends a response, it can pass data to the user's browser in the form of key-value pairs, which the browser stores as cookies. On subsequent requests to 2 min read How to clear cache memory using JavaScript? Clearing cache memory in JavaScript refers to managing or removing stored data like images, files, and resources that browsers save for faster loading. Although JavaScript cannot directly clear the browser cache, developers often use cache-busting techniques to ensure users receive updated content.B 2 min read How to remove an HTML element using JavaScript ? Removing an HTML element using JavaScript involves deleting it from the DOM, typically using methods like element.remove() or parentNode.removeChild(). This approach updates the webpage dynamically, allowing for responsive interactions by removing unwanted or outdated elements based on user actions 3 min read How to empty the content of an element using AngularJS ? In this article, we will see how to remove the content of an element in HTML DOM using AngularJS. This task can be accomplished by implementing the jQuery empty() method that removes all child nodes and their content for the selected elements. Syntax: element.empty();Parameter: This method does not 2 min read How to remove specific div element by using JavaScript? Removing a specific `<div>` element with JavaScript is crucial for dynamic web content management. Whether updating information, responding to user actions, or optimizing performance by cleaning the DOM, efficient DOM manipulation is essential. JavaScript offers diverse methods such as `remove 3 min read Like