How to empty the content of a div

Question

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

Thanks,

Bruno

Thao

via jscript? just by making it not visible? what exactly do you want? – Frontward

Thanks everyone for your answers ! – Thao

See also the closed older question: How to clear the content of a div using javascript? – Recorder

Answer 1

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>

Testicle

Worked great. This removed JS(an OpenLayers map in my case) from the div while $('#example').empty(); didn't remove JS. – Tradein

That destroys it. – Beaston

Answer 2

If you're using jQuery ...

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

or

$('div').empty();

Nimble

He asked in javascript not jquery. – Understood

Answer 3

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.

Jarodjarosite

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. – Thorsten

No, you are right. I misread that. I mistook operations per second, for total time. I will update my answer. – Jarodjarosite

Answer 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 *).

Zales

Answer 5

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

See the documentation.

Hands

The original question made no reference to jquery. Please stop assuming basic javascript operations require some kind of external library for every simple task. – Patience

@Patience 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 ... – Hands

so was document.querySelector("#myDiv").InnerHTML = ""; – Patience

You do not need the overhead of all of jQuery to do that. Also, suggesting better practice is not subject to expiry. – Patience

@Patience 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. – Breakage

Answer 6

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();

Jackiejackinoffice

Answer 7

you can use .replaceChildren() without argument:

const div = document.querySelector('div.my-div')
div.replaceChildren()

Brandwein

Answer 8

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 = "";

Fainthearted