javascript 中 JQuery 的remove 怎么实现的 ?

gclove
  • 1.4k

我想删除 所有 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]);
    }
回复
阅读 4.4k
4 个回答
_我已经从中二毕业了
  • 7.9k
✓ 已被采纳

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 集合的快照,对文档的任何操作都不会对其产生影响。

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

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

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏