You have to just use document getElementById and set the element to empty. If your div looks like this:
<div id="MyDiv">content in here</div>
Then this Javascript:
document.getElementById("MyDiv").innerHTML = "";
will make it look like this:
<div id="MyDiv"></div>
If you’re using jQuery …
$('div').html('');or
$('div').empty();Clear div content in JavaScript
Simple example code Add this function somewhere on your page (preferably in the <head>). Then add the button on click event:
<!DOCTYPE html>
<html>
<body>
<div id="MyDiv">Content in here</div>
<button onclick="clearBox('MyDiv')"> Clear </button>
<script>
function clearBox(elementID)
{
document.getElementById(elementID).innerHTML = "";
}
</script>
</body>
</html>Output:
Remove all child elements of a DOM node in JavaScript
Clearing innerHTML:
- This approach is simple, but might not be suitable for high-performance applications because it invokes the browser’s HTML parser (though browsers may optimize for the case where the value is an empty string).
doFoo.onclick = () => {
const myNode = document.getElementById("foo");
myNode.innerHTML = '';
}<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
<span>Hello</span>
</div>
<button id='doFoo'>Remove via innerHTML</button>Clearing textContent
- As above, but use
.textContent. According to MDN this will be faster thaninnerHTMLas browsers won’t invoke their HTML parsers and will instead immediately replace all children of the element with a single#textnode.
doFoo.onclick = () => {
const myNode = document.getElementById("foo");
myNode.textContent = '';
}<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
<span>Hello</span>
</div>
<button id='doFoo'>Remove via textContent</button>Looping to remove every lastChild:
- An earlier edit to this answer used
firstChild, but this is updated to uselastChildas in computer-science, in general, it’s significantly faster to remove the last element of a collection than it is to remove the first element (depending on how the collection is implemented). - The loop continues to check for
firstChildjust in case it’s faster to check forfirstChildthanlastChild(e.g. if the element list is implemented as a directed linked-list by the UA).
doFoo.onclick = () => {
const myNode = document.getElementById("foo");
while (myNode.firstChild) {
myNode.removeChild(myNode.lastChild);
}
}<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
<span>Hello</span>
</div>
<button id='doFoo'>Remove via lastChild-loop</button>Looping to remove every lastElementChild:
- This approach preserves all non-
Element(namely#textnodes and<!-- comments -->) children of the parent (but not their descendants) – and this may be desirable in your application (e.g. some templating systems that use inline HTML comments to store template instructions). - This approach wasn’t used until recent years as Internet Explorer only added support for
lastElementChildin IE9.
doFoo.onclick = () => {
const myNode = document.getElementById("foo");
while (myNode.lastElementChild) {
myNode.removeChild(myNode.lastElementChild);
}
}<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
<!-- This comment won't be removed -->
<span>Hello <!-- This comment WILL be removed --></span>
<!-- But this one won't. -->
</div>
<button id='doFoo'>Remove via lastElementChild-loop</button>Soruce: https://stackoverflow.com/questions/3955229/
Do comment if you have any doubts or suggestions on this JS HTML div tag topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version