如何使用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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您需要清除所有元素，则无需遍历它们。

您可以像这样清除 innerHTML 的 div ：

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

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

原文由 Ted 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您使用 innerHTML = '' 清除 html，您仍然会加载那些以前的 html 节点。目前最好的方法是迭代并销毁每个节点

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

原文由 Fernando 发布，翻译遵循 CC BY-SA 4.0 许可协议