Javascript not removing all elements within a div

Question

This piece of javascript code is created to remove all inputs that are within 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 does remove only half of elements a call and I have to call it several times in order to remove all inputs.

Please check this Jsfiddle to see it in action.

`elements.length` is evaluated every loop iteration. That's the problem. Try saving the `elements.length` on a variable and use this variable on the `for` loop. — Hugo Hideki Yamashita, Aug 23 '13 at 19:28
@HugoHidekiYamashita no, that's not the problem. If you remove item 0, item 1 becomes item 0. — Denys Séguret, Aug 23 '13 at 19:29
@dystroy sorry. I tried to accept yours but stackoverflow did't allow me to accept saying I have to wait (users here have to wait 10 min to accept one answer). — AMD, Aug 29 '13 at 20:24

score 7 · Accepted Answer · answered Aug 23 '13 at 19:27

7

That's because you skip items while removing from the live nodelist.

When you remove the item at index 0, the item which was at index 1 takes index 0, so you don't remove it as your iteration is already on 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]);
   }
}

answered Aug 23 '13 at 19:27

Denys Séguret

372,613
87
782
758

2

May I offer a demo: [http://jsfiddle.net/davidThomas/9wNkf/1/](http://jsfiddle.net/davidThomas/9wNkf/1/). – David Thomas Aug 23 '13 at 20:00

score 2 · Answer 2 · edited Aug 23 '13 at 19:51

2

Why don't you use jQuery instead?

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

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

edited Aug 23 '13 at 19:51

dnet

1,411
9
19

answered Aug 23 '13 at 19:31

Halo.GC

41
4

3

Please, don't recommend the use of a huge library just for this simple task. – Denys Séguret Aug 23 '13 at 19:31
JQuery is so universal it is almost always appropriate to provide a solution using it if just for any search engine results that lead to the question. – Deadron Aug 23 '13 at 19:35

score -1 · Answer 3 · answered Aug 23 '13 at 19:28

-1

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]);
   }
}

answered Aug 23 '13 at 19:28

Hugo Hideki Yamashita

231
1
5

Javascript not removing all elements within a div

3 Answers3

Linked