Javascript does not delete all elements in a div

Question

This javascript code snippet is created to remove all inputs in a div

function remove_inputs(){ var elements=document.getElementById('thediv').getElementsByTagName('input'); for(var i=0;i<elements.length;i++){ elements[i].parentNode.removeChild(elements[i]); } } 

I delete only half of the call elements, and I have to call it several times to remove all inputs.

Please check this Jsfiddle to see it in action.

Answer 1

This is because you skip items when deleting from a live nodelist .

When you delete an element at index 0, the element that was at index 1 takes index 0, so you do not delete it, since your iteration is already specified at index 1.

Do it like this:

 function remove_inputs(){ var elements=document.getElementById('thediv').getElementsByTagName('input'); while(elements.length){ elements[0].parentNode.removeChild(elements[0]); } } 

Answer 2

Why aren't you using jQuery instead?

 function remove_inputs(){ var elements = $('#thediv input'); elements.remove(); } 

Here is additional information: http://api.jquery.com/remove/

Answer 3

 function remove_inputs(){ var elements = document.getElementById('thediv').getElementsByTagName('input'); var size = elements.length; for(var i = 0; i < size; i++){ elements[i].parentNode.removeChild(elements[i]); } }