我试图从一个简单的网页中动态删除所有(动态添加的)子项，我发现当我单击我的按钮以运行网页中的 JavaScript 代码时，所产生的删除与运行浏览器控制台中的相同代码。
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
最佳答案
这是因为当您单击“删除”按钮时，您仍在单击 body 标记，因此 <body> 中的 onclick标签仍然被触发再次添加文本节点。
关于javascript - 删除 Javascript DOM 中的子项，控制台结果与页内结果不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33906728/