Skip to content

How to clear div content in JavaScript | Code

  • by

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:

Clear div content in JavaScript

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 than innerHTML as browsers won’t invoke their HTML parsers and will instead immediately replace all children of the element with a single #text node.
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 use lastChild as 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 firstChild just in case it’s faster to check for firstChild than lastChild (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 #text nodes 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 lastElementChild in 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

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading