Remove all divs from in a parent div

Question

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>
</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?

`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 03:58
I was told there was a more preferred way to `innerHTML` I've never know why though. — Sir, Jan 28 '13 at 03:58
see this:: http://stackoverflow.com/questions/683366/remove-all-the-children-dom-elements-in-div — Sudhir Bastakoti, Jan 28 '13 at 03: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 04:01
I don't see how a library like jQuery is any better i don't like to use such libraries prefer to make my own from ground up! :) — Sir, Jan 28 '13 at 04: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 04:02

Joseph Silber · Accepted Answer · 2013-01-28T04:01:00.793

9

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

edited Jan 28 '13 at 04:01

answered Jan 28 '13 at 03:54

Joseph Silber

205,539
55
352
286

score 3 · Answer 2 · answered Jan 28 '13 at 04:13

3

The fastest way seems to be:

document.getElementById('parent').textContent = '';

answered Jan 28 '13 at 04:13

Wojciech Bednarski

5,509
8
47
72

Remove all divs from in a parent div

2 Answers2