如何在JavaScript中删除子节点

How to remove children in JavaScript

本文关键字：删除 子节点 JavaScript      更新时间：2023-09-26

下面的JQuery代码在JavaScript中是等价的:

$('div').children().remove();

我试着遵循，但它说长度没有定义:

var nodes = document.getElementsByTagName('div').childNodes;
for(var i=0; i< nodes.length; i++) {
         nodes[i].remove();
}

小提琴

在纯JavaScript中跨浏览器删除元素的正确方法是:

element.parentNode.removeChild(element);

所以按照你的例子，解决方案是:

var nodes = document.getElementsByTagName('div');
for (var i = 0, len = nodes.length; i < len; i++) {
    var node = nodes[i],
        children = node.childNodes;
    for (var j = children.length; j--;) {
        node.removeChild(children[j]);
    }
}

然而，删除所有子节点的更好选择是在while循环中执行:

var nodes = document.getElementsByTagName('div');
for (var i = 0, len = nodes.length; i < len; i++) {
    var node = nodes[i];
    while (node.firstChild) {
        node.removeChild(node.firstChild);
    }
}
演示:

http://jsfiddle.net/N6RM4/1/

检查document.getElementsByTagName('div')

返回NodeList

没有成员childNodes

要删除所有div的所有子节点，需要遍历这些节点。

这是一个工作示例

HTML 

<button id="adds" onclick="add()">add</button>
<button id="removes" onclick="del()">remove</button>
<form>
    <div id="myList">
        <div><input type="checkbox"></div>
    </div>
</form>

JS 

function del(){
    var list=document.getElementById("myList");
    if (list.childNodes.length > 2){
        list.removeChild(list.childNodes[list.childNodes.length-1]);
    }
}

function add(){
    var par=document.createElement("div");
    var chi = document.createElement('div');    
    chi.innerHTML = '<input type="checkbox"></input>';
    par.appendChild(chi);
    document.getElementById("myList").appendChild(par);
}

getElementsByTagName返回一个元素列表，您必须指定索引(在您的示例中为[0])

var nodes = document.getElementsByTagName('div')[0].childNodes;

JSfiddle

相关文章：