javascript - Javascript没有删除div中的所有元素

Question

创建这段 javascript 代码是为了删除 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]);
   }
}

我确实只删除了一次调用的一半元素，并且我必须多次调用它才能删除所有输入。

请检查这个Jsfiddle以查看它的实际效果。

Answer 1

那是因为您在从活动 nodelist中删除时跳过了项目。

当您删除索引 0 处的项目时，索引 1 处的项目将使用索引 0，因此您不要删除它，因为您的迭代已经在索引 1 上。

像这样做 ：

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

Answer 2

你为什么不改用 jQuery 呢？

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

这里有更多信息：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]);
   }
}