javascript - 删除多个 Canvas

Question

我需要删除创建的多个 Canvas 元素。使用下面的功能，我可以在每次单击按钮时删除一个，但我需要删除一次创建的所有 Canvas 。我该怎么做？

function deleteCanvas() {
  var list = document.getElementById("output");
  list.removeChild(list.childNodes[0]);
}

Answer 1

您可以使用while，只要列表中有子元素，就一直删除它们:

function deleteCanvas() {
  var list = document.getElementById("output");
  while(list.childNodes.length) {
    list.removeChild(list.childNodes[0]);
  }
}

canvas {
 width: 10px;
 height: 10px;
 outline: solid red 1px;
}

<div id="output">
  <canvas></canvas>
  <canvas></canvas>
  <canvas></canvas>
  <canvas></canvas>
</div>

<button onclick="deleteCanvas()">delete all canvas elements</button>