How to clear the content of a div using JavaScript?
Last Updated :
15 Jan, 2024
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:
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>
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:
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.
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>
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:
Share your thoughts in the comments
Please Login to comment...