從父元素中移除子項的最佳方法？

我正在使用dinamically創建的JavaScript元素。所有的元素都附加到同一個div，但有時我需要清空div並添加新的元素。從父元素中移除子項的最佳方法？

在以前的項目中，我用在我加入每一個元素生成的ID到陣列的方法，當我不得不刪除他們，我運行以下algorith：

for (var a = IDArray.length-1; a>=0; a--){ 
    var element = document.getElementById(IDArray[a]); 
    element.parentNode.removeChild(element); 
    IDArray.splice(a,1); 
}

它的工作完美，但我開始想想：我正在追加並從一個具有innerHTML值的div中移除。所以我可以使用下面的行空的DIV：

document.getElementById("parentDiv").innerHTML = "";

我試了一下，他們都取得了同樣的事情，至少它看起來像它。

我的問題是：使用innerHTML方法有任何可能導致網站可用性問題的後果？還是僅僅是一個更短，更有效的方式來實現相同的事情？

來源

2015-04-19 Adam Benedek

我想說的第二個例子是好的。

從我的經驗來看，非常新手的JavaScript編程人員太多地使用了innerHTML。但是，熟練的JavaScript編程人員可能不會經常使用它。

一方面，這是一種簡單的便利方法 - 您必須將它看作更像是一種方法而不是屬性。它不應該被過度使用，只是將單個節點添加到元素中。但是，如果您要對元素的整個內容進行粗略更改，並且創建/檢索HTML的某些HTML表示形式非常簡單，那麼可以使用它;請記住，它是用瀏覽器的本地代碼（C++）編寫的，因此它可能比您組裝的任何循環運行得更快。

爲避免使用ID，請記住，您可以使用「elem.children」檢索元素的子元素，該子元素返回一個類似數組的數組（不是大寫數組）。如果您爲他們提供所有共享課程，則還可以快速重新查找元素。在我自己的項目中，如果我確實知道整個文檔中只有一個元素，我只給元素一個ID;而且我從不以數字方式分配ID。

來源

2015-04-19 17:34:56 Katana314

有辦法做到這一點毫無疑問號，但如果你有參考子元素（變量持有元素的引用），比你可以簡單地做：

myChildNode.parentNode.removeChild(myChildNode);

否則的innerHTML也沒有任何後果。

來源

2015-04-19 17:32:33

是的，將innerHTML設置爲「」是清除元素的完美解決方案。事實上，如果您保留對數組中舊元素的引用，則必須清理該數組以允許它們被垃圾收集。

當然，如果您確實需要其他原因的引用，請不要忘記在從DOM中刪除元素時刪除這些引用（或包含它們的對象）。

不使用innerHTML清理孩子並不真正需要這些引用。你可以逃避：

while(parent.firstChild) parent.removeChild(parent.firstChild)

來源

2015-04-19 17:34:17 Touffy

對此有相當多的討論。例如：What is the best way to empty an node in JavaScript。

最快的方法，特別是對深度嵌套的元素，似乎是：

while(element.firstChild){ 
    element.removeChild(element.firstChild); 
}

來源

2015-04-19 17:36:13 Sidd

從父元素中移除子項的最佳方法？

回答

相關問題