Remove element by tag name [duplicate]

Answer 1

var element = document.getElementsByTagName("label"), index;

for (index = element.length - 1; index >= 0; index--) {
    element[index].parentNode.removeChild(element[index]);
}

Answer 2

Why not use jQuery? Then it's simply

$("label").remove();

Answer 3

When you remove the nodes from a document, the list of nodes that you just obtained from getElementsByTagName() gets updated too to avoid lingering references, so you should just keep removing the first node until none remain.

var nodes = document.getElementsByTagName("label");

for (var i = 0, len = nodes.length; i != len; ++i) {
    nodes[0].parentNode.removeChild(nodes[0]);
}

Here, the value of nodes.length is cached; otherwise it would keep decreasing and you end up only removing half :)

Answer 4

The problem is that document.getElementsByTagName() returns a NodeList, not an Array. The content, and therefore length, of a NodeList is updated when you remove an element from the DOM that's in the NodeList. So when you remove the first element, the NodeList gets shorter and a new first element occupies index 0. Updating index in the loop therefore makes you miss at least one element, possibly more depending on the length of the result.

Try something like this:

var elements = document.getElementsByTagName('label')
while (elements[0]) elements[0].parentNode.removeChild(elements[0])

Answer 5

The "problem" is that .getElementsByTagName() returns a Live NodeList. Hence, when you remove the head (first) entry, the tail fills up and moves to the left, so to speak.

Its not a real Javascript Array where this would work as expected. To create such a frozen Array we can go like

var element = Array.prototype.slice.call(document.getElementsByTagName("label"),0); 

for (var index = 0, len = element.length; index < len; index++) {
    element[index].parentNode.removeChild(element[index]);
}