刪除Javascript中的兒童DOM，控制檯結果與頁內結果不同

我試圖從簡單的網頁動態刪除所有（動態添加的）兒童，並且我發現當我點擊我的按鈕以運行JavaScript代碼時網頁，所產生的刪除與如果我在瀏覽器控制檯中運行相同的代碼不同。刪除Javascript中的兒童DOM，控制檯結果與頁內結果不同

HTML：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <script src="js/main.js"></script> 
    </head> 

    <body onclick="addText()"> 
     <h1 id="my_text">Click on the page.</h1> 
     <button onclick="deleteText()">Click here to remove text node</button> 
    </body> 
</html>

的JavaScript：

function addText() { 
    newText = document.createTextNode("This is dynamically added text"); 
    newText.id = "dynamicText"; 

    var textPart = document.getElementById("my_text"); 
    textPart.appendChild(newText); 
} 

function deleteText() { 
    var parent = document.getElementById("my_text"); 

    while (parent.childNodes[1]) { 
     parent.removeChild(parent.childNodes[1]); 
    } 
}

在瀏覽器中，我點擊標題，文本節點動態地附加到頭部。然後我想單擊該按鈕以刪除所有動態添加的文本。當我點擊瀏覽器上的按鈕，它會刪除所有動態添加的文字，除了一個newText元素，造成這樣的：

Click on the page.This is dynamically added text

但是，當我執行相同的代碼（甚至只是調用函數deleteText（））在瀏覽器的控制檯，則刪除所有newText元素如所期望，導致這樣的：

Click on the page.

我想知道，當代碼被從瀏覽器窗口與在瀏覽器中執行的控制檯是爲什麼結果不同？我正在使用Chrome版本46.0.2490.86 m

來源

2015-11-25 ableader

這不會導致您的問題，但作爲一個附註，您將爲所有新文本節點分配相同的ID'newText.id =「dynamicText」;'... DOM ID值必須是唯一的在DOM樹內。擁有重複的ID可能會導致Javascript和CSS的意外行爲。您可能需要使用_class_。你也應該在_newText_上使用var：'var newText = document ....' –

這是因爲當您點擊「刪除」按鈕時，您仍然點擊正文標籤，因此<body>標籤中的onclick仍然正在觸發，然後再次添加文本節點。

來源

2015-11-25 01:05:43

刪除Javascript中的兒童DOM，控制檯結果與頁內結果不同

回答

相關問題