如何从父div删除div列表？

Question

我的JavaScript有问题。

我需要从父div删除div列表。 所以我尝试了这个：

var divs = parent.getElementsByTagName("div");
if(divs != null)
{
    for(var v = 0; v < divs.length; v++)
    {
        parent.removeChild(divs[v]);
    }
}

但是问题是，JS不会删除所有的div。 JS只删除列表的一半。

我也试过这个：

var divs = parent.getElementsByTagName("div");
if(divs != null)
{
    for(var v = 0; v < divs.length; v++)
    {
        parent.removeChild(divs[0]);
    }
}

但是结果一样

请帮忙？

Answer 1

var divs = parent.getElementsByTagName("div");
while(divs[0]) {
    divs[0].parentNode.removeChild(divs[0])
}

getElementsByTagName返回的列表是live 。 这意味着在删除DOM对象时会对其进行更新，因此每个周期的长度都不相同。

这是一个小提琴 。

Answer 2

您为什么不尝试以下方法：

var divs = parent.getElementsByTagName("div");
if (divs.length > 0) {  // Technically unnecessary, as the for loop just won't run if there aren't any elements returned
    for (var v = divs.length; v >= 0; v--) {
        divs[v].parentNode.removeChild(divs[v]);
    }
}

为了解释为什么这样做是正确的，必须使用removeChild删除父节点的实际子级 。 如果div[v]是一个后代（您知道，就像嵌套在另一个元素（不是div）内，它是parent的实际子元素）。 当您引用某个元素时，这是一种安全的方法。 您保证元素的父节点正在删除它，因此是有效的。 如果您检查控制台以尝试像您的代码和其他代码一样使用parent.removeChild ，则任何后代都会抛出异常parent.removeChild : //jsfiddle.net/ujaSv/

尽管重要的是要指出，为此，用for循环更好的替代方法是：

while (divs[0]) {
    divs[0].parentNode.removeChild(divs[0]);
}

我没有想到这种出色的功能-这是在另一个答案/评论区域中决定的。

Answer 3

两种解决方案：

1：倒数

var divs = parent.getElementsByTagName("div");
if(divs != null)
{
    for(var v = divs.length - 1; v >= 0; v--)
    {
        parent.removeChild(divs[0]);
    }
}​

2：缓存长度：

var divs = parent.getElementsByTagName("div");
if(divs != null)
{
    for(var v = 0, len = divs.length; v < len; v++)
    {
        parent.removeChild(divs[0]);
    }
}