如何使用JS删除div元素的所有子元素？解决乘法表重复输出问题

嗨，我懂你的困扰——每次输入新数字生成乘法表时，旧内容不会自动消失，新表直接堆在旧表下面，页面看起来乱糟糟的对吧？其实只需要在生成新乘法表之前，先把存放表格的div容器清空就可以啦。

这里有两种简单有效的清空方式：

方法1：用innerHTML快速清空 #

这是最简洁的实现方式，直接把容器的HTML内容设为空字符串，一秒就能清掉所有子元素：

box.innerHTML = "";

方法2：循环移除子元素（原生DOM操作） #

如果你偏好更“纯粹”的DOM操作逻辑，可以通过循环逐个移除容器的第一个子元素，直到容器为空：

while(box.firstChild) {
  box.removeChild(box.firstChild);
}

修改后的完整代码 #

把清空操作放在生成新内容的for循环之前，这样每次调用print()时，都会先清除旧内容，再生成新的乘法表：

function print() { 
  var box = document.getElementById("table"); 
  // 先清空容器内的旧内容
  box.innerHTML = "";
  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); 
  } 
}

这样调整后，下次输入新数字点击生成时，旧的乘法表就会被清空，页面上只会显示最新的那一份啦~

内容的提问来源于stack exchange，提问作者user9063381