Question

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.

Answer 1

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:

• getElementsByClassName() – https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName
• querySelectorAll() – https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
• removeChild() – https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild