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对象时更新，因此每个周期的长度都不相同。

这是fiddle。

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，例如您和其他代码，那么任何后代都会抛出异常 - http://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]);
    }
}

如何从父div中删除div列表？

3 个答案: