Take the 2-minute tour ×

Hey how do I remove all divs from a parent div in JavaScript?

I can't find non jquery examples. They all have different classes/Ids so I'm wondering if there is a simple way to do it ? For example:

<div id="parent">
   <div class="something"      id="one">Remove me</div>
   <div class="something_two"  id="two">Remove me</div>
   <div class="something_three"id="three">Remove me</div>
   <div class="something_four" id="four">Remove me</div>

Is there a simple way to do this - my current method is to do innerHTML = ""; but wondered if thats only best for removing text and not elements?

share|improve this question
innerHTML is for everything, innerText is for text (not sure where it works) innerHTML is way faster then standard DOM methods, I mean performance. –  Wojciech Bednarski Jan 28 '13 at 3:58
I was told there was a more preferred way to innerHTML I've never know why though. –  Dave Jan 28 '13 at 3:58
see this:: stackoverflow.com/questions/683366/… –  DemoUser Jan 28 '13 at 3:58
yes, because innerHTML is not a standard but is faster so its more preferable in fact. Anyway it's better to use some library to handle DOM manipulation. –  Wojciech Bednarski Jan 28 '13 at 4:01
it's just way easier to work with high level API and be sure it works in many browsers. –  Wojciech Bednarski Jan 28 '13 at 4:02

2 Answers 2

up vote 5 down vote accepted

Using innerHTML will remove actual elements, there are some cross browser quirks (mainly IE which, ironically, was the one that originally invented innerHTML).

Here's a more standard way of doing it:

var el = document.getElementById('parent');

while ( el.firstChild ) el.removeChild( el.firstChild );
share|improve this answer
Thank you much :) –  Dave Jan 28 '13 at 3:58

The fastest way seems to be:

document.getElementById('parent').textContent = '';
share|improve this answer

Your Answer


