javascript splice() causes "arrayName.splice() is not a function" error

Question

I am trying to remove certain values from an array containing input fields in a form:

allFields = theForm.getElementsByTagName("INPUT");
for(j = 0; j < allFields.length; j++) {
 if(allFields[j].className == "btn" || allFields[j].className == "lnk") {
 allFields.splice(j,1);
 }
}

It causes an error. Firebug shows following error and the script doesn't work.

allFields.splice is not a function

This also happened with any other Array method I tried. How can I fix this?

Answer 1

allFields is not an array, but a NodeList.

If you want to remove elements, do a reverse loop and use removeChild:

var allFields = theForm.getElementsByTagName("input");
for(var j=allFields.length-1; j>=0; j--){
 if(allFields[j].className == "btn" || allFields[j].className == "lnk"){
 allFields[j].parentNode.removeChild(allFields[j]);
 }
}

• Lekensteyn: Firefox says it's a HTMLCollection, but according to the book "JavaScript: The Definitive Guide", by David Flanagan, it's a NodeList (page 767).
• Gumbo: getElementsByTagName returns a NodeList.
• Lekensteyn: Well, that's a bug in Firefox then. document.getElementsByTagName('a') instanceof NodeList evaluates to true in Chrome, but Firefox says false. edit: yes it's a bug
• Dean: Thanks, I didn't know that. Why does it have to be a reverse loop? Is it possible to remove child with allFields.removeChild(allFields[j]) ??
• Lekensteyn: If you remove a node, the loop will skip the next node. That's because the NodeList is dynamic. This story applies to arrays too.