如何在JavaScript中移除子元素

Question

以下是相应的 JavaScript 代码等效于上述 JQuery 代码：

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

我尝试了下面的方法，但是它显示未定义长度：

以下是我的代码：

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

         nodes[i].remove();

}

Fiddle

- user3421904

Answer 1

在纯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/

- VisioN

---

document.getElementsByTagName('div').childNodes 没有长度，但是 document.getElementsByTagName('div') 有长度。 - Gábor Buella

@user3421904 是的，因为 getElementsByTagName 返回一个 <div> 元素的 NodeList，你需要遍历它。 - VisioN

这会分离那些元素上的任何jQuery事件吗？还是你需要做一些特殊的事情？ - Jeremy J Starcher

@JeremyJStarcher：不，它并没有像VisioN所说的那样分离任何jQuery事件或数据。如果这些元素与任何jQuery事件或数据相关联，这将导致内存泄漏。 - cookie monster

@cookiemonster，你说得对，关于索引的问题，谢谢！我完全忘记了这一点，只是凭借自己的经验提供了解决方案。反向循环就可以解决问题。 - VisioN

Answer 2

检查 document.getElementsByTagName('div')

它返回一个 NodeList

这里没有叫做 childNodes 的成员

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

- Gábor Buella

Answer 3

getElementsByTagName 返回一个元素列表，你需要指定索引（在你的情况下是 [0]）

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

JSfiddle

{{链接1：JSfiddle}}

- alexP

Answer 4

这是一个工作示例

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

- Kvothe