13

How can I remove the content of a div tag using JavaScript?

I have tried some code, but it only removes the level1 div (and of course all o it childern), but how can I remove only the content in level3 inside?

function destroyDiv() {
  var div = document.getElementById("level1");
  div.parentNode.removeChild(div);
}
<div id="level1">

  <div id="level2">

    <div id="level3">
      <label> Test content </label>
    </div>

  </div </div>

  <div id=blahDiv>Remove me</div>
  <input type=button value='Remove the div' onclick='destroyDiv()'>

2
  • You want to remove the div itself or the content inside the opening and closing tags of a particular div is not clear from your post.
    – check123
    Commented May 6, 2011 at 8:53
  • I guess you have got quite a few answers and almost unanimous and correct.
    – check123
    Commented May 6, 2011 at 9:01

6 Answers 6

27

This sould work document.getElementById("level3").innerHTML = ''; but try thinking about using jQuery, because .innerHTML implementation differs in some browsers. jQuery would look like $('#level3').html('');

1
  • 5
    @holian: then why question is tagged javascript? and what about this: how can i remove the content of a div tag with javascript?
    – Harry Joy
    Commented May 6, 2011 at 9:06
6

Why don't you access directly level3 ?

   document.getElementById("level3").innerHTML = "";
2

You can use:

document.getElementById("level3").innerHTML = "";
1

How about this?

var div = document.getElementById("level3");
div.innerHTML = "";
1
(() => { 
          'use strict';
          let needle = 'level3';
          if ( needle === '' || needle === '{{1}}' ) {
              needle = '.?';
          } else if ( needle.slice(0,1) === '/' && needle.slice(-1) === '/' ) {
              needle = needle.slice(1,-1);
          } else {
              needle = needle.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
          }
          needle = new RegExp(needle);
          const divnode = ev => {
                                        if (ev) { window.removeEventListener(ev.type, divnode, true); }
                                    try {
                                            const divs = document.querySelectorAll('div');
                                            for (const div of divs) {
                                                    if (div.outerHTML.match(needle)) {
                                                                    div.remove();
                                                    }           
                                            }
                                    } catch(ex) {
                                        }
          };
          if (document.readyState === 'loading') {
                   window.addEventListener('DOMContentLoaded', divnode, true);
          } else {
                   divnode();
          }
})();

There you go. A dedicated div-remover with RegEx support.

0

While setting the innerHTML property to "" works, a more DOM-ish solution to remove all of the content of a div is to use replaceChildren:

div.replaceChildren()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.