9

Possible Duplicate:
Remove all elements with a certain class with JavaScript

As title, google search gives me all jquery results. Is there a method that does this? ex.

<div id="container">
   <div class="dontdelete">...</div>
   <div class="deleteme>...</div>
   <div class="dontdelete">...</div>
   <div class="deleteme>...</div>
   <div class="dontdelete">...</div>
   <div class="deleteme>...</div>
</div>

Is there a method in pure javascript to delete all child with "deleteme" class? Thanks in advance.

Community
  • 1
  • 1
wtsang02
  • 18,603
  • 10
  • 49
  • 67

4 Answers4

16

Since element.getElementsByClassName returns a live node list, you need to loop through the list in a certain way (since removing them from the DOM removes them from the list as well). Try something like this:

var container = document.getElementById("container");
var elements = container.getElementsByClassName("deleteme");

while (elements[0]) {
    elements[0].parentNode.removeChild(elements[0]);
}

DEMO: http://jsfiddle.net/sR2zT/1/

Or you could use something like element.querySelectorAll to select the elements, where you can do things like this:

document.querySelectorAll("#container .deleteme")
// or
document.getElementById("container").querySelectorAll(".deleteme")

In this scenario, you don't need to do special looping, because querySelectorAll doesn't contain a live node list.

References:

Ian
  • 50,146
  • 13
  • 101
  • 111
3

You are probably looking for getElementsByClassName to get all your elements. Then you can use something like removeChild to delete the nodes. 

​var elements = document.getElementById("container")
                   .getElementsByClassName("deleteme");    ​​​

while (elements.length > 0) {
    elements[0].parentNode.removeChild(elements[0]);
}

Working example: http://jsfiddle.net/ja4Zt/1/

Browser support:

The only caveat with this solution is that it has limited support in IE. According to this table, getElementsByClassName was implemented in IE as of version 9.

To bridge this, you could select all nodes that are child of the element with ID container, loop over them and check if they have the class "deleteme", and only then delete them.

Christofer Eliasson
  • 32,939
  • 7
  • 74
  • 103
  • This isn't fully correct - your fiddle throws an error (if you actually close the quotes in your HTML). This is because the `getElementsByClassName` returns a live node list of matches. So when you loop from 0 to its length and remove the element (which affects the actual list), the item is actually removed from the list as well and you get an out-of-bounds error. Try using a while loop or for looping from its length to 0. – Ian Nov 25 '12 at 21:55
  • @Ian Thank you, I didn't think of that! Updated my answer accordingly. – Christofer Eliasson Nov 25 '12 at 22:04
2

This version avoids having to use .getElementsByClassName() which as others have mentioned is not supported in certain IE versions.

var divs = document.getElementById("container").childNodes;
var i = divs.length;
while( i-- ) {
    if( divs[i].className && divs[i].className.indexOf("deleteme") > -1 ) {
      divs[i].parentNode.removeChild( divs[i] );
    }
}​

This also traverses the resulting array backwards so deleting nodes doesn't affect the next iteration.

Fiddle here

Bruno
  • 5,772
  • 1
  • 26
  • 43
  • I don't mind the downvote but it might be nice to know why even if it is just so I don't make the mistake of using the above in the future :) – Bruno Nov 25 '12 at 22:44
  • 1
    I didn't vote, but your `--i` should be `i--`. The way it is right now, you'll always be skipping the first item in the collection. http://jsfiddle.net/BShu4/2/ – I Hate Lazy Nov 26 '12 at 15:10
  • 2
    @user1689607 Thank you for giving me a chance to correct it. – Bruno Nov 26 '12 at 15:13
-1
var divs = document.getElementsByClassName("deleteme");
for (var idx = 0; idx != divs.length; idx++) {
  var div = divs[idx];
  while (div.firstChild)
    div.removeChild(div.firstChild);
}

​

Jim Blackler
  • 22,946
  • 12
  • 85
  • 101