Question

我试图从一个简单的网页动态删除所有（动态添加的）孩子，我发现当我点击我的按钮在网页中运行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

Answer 1

因为当你点击你的＆＃34;删除＆＃34;您仍然在主体标记中单击按钮，因此仍然会触发<body>标记中的onclick再次添加文本节点。

在Javascript DOM中删除子项，控制台结果与页内结果不同

1 个答案: