38

Does someone know how to empty the content of a div (without destroying it) in JavaScript?

Thanks,

Bruno

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
Bruno
  • 8,497
  • 13
  • 38
  • 55

8 Answers8

71

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>

Zach Rattner
  • 20,745
  • 9
  • 59
  • 82
11

If you're using jQuery ...

$('div').html('');

or 

$('div').empty();
ezmilhouse
  • 8,933
  • 7
  • 29
  • 38
9

An alternative way to do it is:

var div = document.getElementById('myDiv');
while(div.firstChild)
    div.removeChild(div.firstChild);

However, using document.getElementById('myDiv').innerHTML = ""; is faster.

See: Benchmark test

N.B.

Both methods preserve the div.

Community
  • 1
  • 1
Dan Bray
  • 7,242
  • 3
  • 52
  • 70
  • 1
    Am I misreading that test? For all browsers the first way has higher ops/sec which means its faster. The second way is slower and more convoluted. – pucky124 Sep 13 '17 at 02:28
  • No, you are right. I misread that. I mistook operations per second, for total time. I will update my answer. – Dan Bray Sep 13 '17 at 10:47
4

If by saying without destroying it, you mean to a keep a reference to the children, you can do:

var oldChildren = [];

while(element.hasChildNodes()) {
    oldChildren.push(element.removeChild(element.firstChild));
}

Regarding the original tagging (html css) of your question:

You cannot remove content with CSS. You could only hide it. E.g. you can hide all children of a certain node with:

#someID > * {
    display: none;
}

This doesn't work in IE6 though (but you could use #someID *).

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
3

In jQuery it would be as simple as $('#yourDivID').empty()

See the documentation.

Jan Zyka
  • 17,460
  • 16
  • 70
  • 118
  • 4
    The original question made no reference to jquery. Please stop assuming basic javascript operations require some kind of external library for every simple task. – mopsyd Apr 04 '16 at 17:30
  • @mopsyd oh boy, is this necessary 5 years later after the answer? :) jQuery was sort of standard in 2011 and for your information it's still widely used. jQuery is javascript btw. if you didn't know ... – Jan Zyka Apr 05 '16 at 06:49
  • so was `document.querySelector("#myDiv").InnerHTML = "";` – mopsyd Apr 05 '16 at 19:04
  • 1
    You do not need the overhead of all of jQuery to do that. Also, suggesting better practice is not subject to expiry. – mopsyd Apr 05 '16 at 19:05
  • 3
    @mopsyd that's your opinion. That library(jQuery) made very complex tasks much simpler. Very big sites use it. So relax. It's up too you if you want to do things the hard way. Nobody cares. – Panama Jack Jul 03 '16 at 07:38
1

This method works best to me:

Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

To use it we can deploy like this:

document.getElementsByID('DIV_Id').remove();

or

document.getElementsByClassName('DIV_Class').remove();
eQ19
  • 9,880
  • 3
  • 65
  • 77
0

you can use .replaceChildren() without argument:

const div = document.querySelector('div.my-div')
div.replaceChildren()
Yukulélé
  • 15,644
  • 10
  • 70
  • 94
0

You can empty your DOM using this:

const el = document.getElementById("MyDiv");
while (el.firstChild) {
  el.removeChild(el.firstChild);
}

This is supposed to be faster than the traditionally used method : document.getElementById("MyDiv").innerHTML = "";

Giridharan Selvaraju
  • 11
  • 1