CODEWITHSUNDEEP
javascripthtmlremovechild
AMD
AMD

Reputation: 1268

Javascript not removing all elements within a div

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.

Upvotes: 5

Views: 986

Answers (3)

Halo.GC
Halo.GC

Reputation: 41

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/

Upvotes: 2

Hugo Hideki Yamashita
Hugo Hideki Yamashita

Reputation: 221

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

Upvotes: -1

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382168

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

Upvotes: 7

Related Questions