如何從父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]);
    }
}