How do I clear the content of a div using JavaScript?

Question

When the user clicks a button on my page, the content of a div should be cleared. How would I go about accomplishing this?

[This question is being discussed on meta.](https://meta.stackoverflow.com/questions/370942/is-this-question-considered-on-topic) — Script47, Jul 12 '18 at 11:35

score 270 · Accepted Answer · edited Sep 12 '12 at 05:30

270

Just Javascript (as requested)

Add this function somewhere on your page (preferably in the <head>)

function clearBox(elementID)
{
    document.getElementById(elementID).innerHTML = "";
}

Then add the button on click event:

<button onclick="clearBox('cart_item')" />

In JQuery (for reference)

If you prefer JQuery you could do:

$("#cart_item").html("");

edited Sep 12 '12 at 05:30

animuson

answered Aug 10 '10 at 15:27

Tom Gullen

50

alternate jQuery: `$("#cart_item").empty();` – Rob Allen Aug 10 '10 at 15:47
Could you use .detach() also? – RyanP13 Aug 10 '10 at 16:24
@Tom Gullen this worked for me without passing the id of the DIV into the function, and with single quotes around the elementID in the function itself. Thanks for this! – DPSSpatial Jul 09 '14 at 17:28
3

@Tom Gullen : please not that this does'nt remove event handlers associated with the nodes inside that div. – bhavya_w Sep 15 '14 at 11:40
**@Mic**'s answer is about 250x quicker. https://jsperf.com/innerhtml-vs-removechild – tleb Oct 24 '16 at 00:45
+2∞ does the math work out? how many points now – Gregory Magarshak Jan 10 '17 at 21:08
thanks, i choose innerHTML because not using Jquery :) – yussan Sep 02 '17 at 15:36

score 108 · Answer 2 · answered Aug 10 '10 at 15:38

108

You can do it the DOM way as well:

var div = document.getElementById('cart_item');
while(div.firstChild){
    div.removeChild(div.firstChild);
}

answered Aug 10 '10 at 15:38

Mic

1

Top notch! The same as jQuery: $("#cart_item").empty(); acting on DOM and not only on content. Great! – Pedro Ferreira Mar 27 '16 at 00:59
Is this preferred over `innerHTML = ''` and if so why? – Sukima May 23 '16 at 13:04
The DOM way was(at the time of the answer) and is probably still today much faster than `innerHTML` – Mic May 24 '16 at 19:53
1

this feels cleaner than `innerHTML = ''`. I would personally write the extra couple of lines – dmo Nov 04 '16 at 14:40
Also this is nicer for my event handlers :) – rustypaper May 19 '17 at 23:41
1

@Sukima this way is faster than prefered answer, so if you need better performance rather than short code this is your choose. – iiic Feb 06 '18 at 08:16
1

as a one liner `while(div.firstChild && div.removeChild(div.firstChild));` – Russell Elfenbein Apr 24 '18 at 12:48
@RussellElfenbein, that one-liner is missing getting the div element. – Jānis Elmeris Jun 01 '18 at 11:01

2 Answers2