javascript 中 JQuery 的remove 怎么实现的 ?

Question

我想删除 所有 checkbox , 为什么不能都删掉 ....
这是纯 javascript .

<ul>
    <li><input type="checkbox" value="A"> 选项1</li>
    <li><input type="checkbox" value="B"> 选项2</li>
    <li><input type="checkbox" value="C"> 选项3</li>
    <li><input type="checkbox" value="D"> 选项4</li>
</ul>

    var arr = document.getElementsByTagName('input');
    for (var i = 0; i < arr.length; i++) {
        arr[i].parentNode.removeChild(arr[i]);
    }

Answer 1

把var arr = document.getElementsByTagName('input');改成var arr = document.querySelectorAll('input[type="checkbox"]');就可以了。

因为getElementsByTagName返回的是Live Node List。而querySelectorAll返回的是Static Node List。

例子（来自querySelectorAll 方法相比 getElementsBy 系列方法有什么区别？）

// Demo 1
var ul = document.querySelectorAll('ul')[0],
    lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
    ul.appendChild(document.createElement("li"));
}

// Demo 2
var ul = document.getElementsByTagName('ul')[0], 
    lis = ul.getElementsByTagName("li"); 
for(var i = 0; i < lis.length ; i++){
    ul.appendChild(document.createElement("li")); 
}

因为 Demo 2 中的 lis 是一个动态的 Node List， 每一次调用 lis 都会重新对文档进行查询，导致无限循环的问题。
而 Demo 1 中的 lis 是一个静态的 Node List，是一个 li 集合的快照，对文档的任何操作都不会对其产生影响。

Answer 2

因为你的arr.length在变啊，只循环了两次

Answer 3

for (var i = 0; i < arr.length; i++) {
        arr[i].remove();
    }

Answer 4

这里的length是在不断的变化的，所以并不能全部的删除。

 var arr = document.querySelectorAll('input[type=checkbox]');

 for (var i = 0; i < arr.length; i++) {
   arr[i].parentNode.removeChild(arr[i]);
}

上面的是修改了一下的最终的代码。