如何使用JS删除div元素中的所有子元素

Question

嘿，大家好，我正在学习JS。我做了一个简单的应用程序，可以显示输入数字的乘法表。问题是，当我再次输入数字时，它会在之前的乘法表下面打印出来，因此我想在重新输入数字时删除div标签的所有子元素。

function print() {
    var box = document.getElementById("table");

    for(let i=1 ; i<=10 ; i++) {
        var t = document.getElementById("tabInput").value;
        var t_Element = document.createElement("p");
        var t_line = document.createTextNode(t + " x " + i + " = " + t*i);
        t_Element.appendChild(t_line);
        box.appendChild(t_Element);
    }
}

- user9063381

---

你能展示一下你尝试过的吗？这样我们可以更好地帮助你。 - Thum Choon Tat

需要为 div 元素添加一个标识符。 - Cillian Collins

"Table" 是 div 的标识符。 - user9063381

这正是相同的问题 https://dev59.com/eG865IYBdhLWcg3wKLT6 - Tamás Varga

Answer 1

如果您需要清除所有元素，则无需迭代它们。您只需像这样清除

的innerHTML即可：

document.getElementById('yourdivid').innerHTML = '';

然后您可以继续执行创建新元素的其余代码

- Ted

---

这种方法不会移除已删除子节点的事件处理程序，可能导致内存泄漏。 - danefondo

@danefondo，您能详细解释一下吗？我理解您评论的第一部分，但是我不太了解它如何会导致内存泄漏。谢谢。 - Neil

Answer 2

如果你使用 innerHTML = '' 清除 HTML，你仍然会有之前的 HTML 节点被加载。目前最好的方法是迭代每个节点并将其销毁。

while (box.hasChildElements()) {
  box.removeChild(box.lastChild)
}

- Fernando

---

您有一个多余的闭括号。应该是 box.removeChild(box.lastChild); - Maximus Nerdous

hasChildElements？也许你的意思是“hasChildNodes”（https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes） - mjaque

Answer 3

如果您有很多元素，需要一种非常快速的方法，则可以使用false deep选项克隆节点，然后进行替换。

let parentNode = document.querySelector("#parentNode"),
   replacedNode = document.querySelector("#replacedNode"),
   newNode = replacedNode.cloneNode(false);
parentNode.replaceChild(newNode, replacedNode)

- Khalifa Gad