删除多个画布

Question

我需要删除创建的多个画布元素。使用下面的功能，每次单击按钮都可以删除一个，但我需要一次性删除所有已创建的画布。如何做到这一点？

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

- bpy

---

你能发布你的HTML文件吗？ - Addis

你的所有画布元素都包含在“output”元素内吗？ - scunliffe

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>

- Constantin Groß

---

请注意，这将不加区分地删除父元素中的所有节点，并且不会检查是否正在删除画布元素。此外，childNodes 包括文本节点，因此您可能会意外删除非空文本节点。children 可能是更好的选择，因为它仅包含元素。 - Patrick Evans

Answer 2

querySelectorAll和各种getElementsBy*方法可以选择多个元素。只需循环遍历返回的列表并根据需要使用remove()函数即可。

例如，如果您有一堆要删除的<canvas class="game">元素，可以使用canvas.game CSS选择器与querySelectorAll或将game传递给getElementsByClassName来定位这些特定元素（保留其他canvas元素）：

let list = document.querySelectorAll('canvas.game');
//or
let list = document.getElementsByClassName("game");

for(let i=0; i<list.length; i++){
  list[i].remove();
}

- Patrick Evans

---

@FZs 他们做的是：https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove，而且还有一个针对旧浏览器（IE）的 polyfill。 - Patrick Evans

哦，是的，我明白了！我不知道这个！我一直用node.parentNode.removeChild(node)来做这件事……直到现在。+1 - FZs

Answer 3

也许像这样吗？

let canvasses = document.getElementsByTagName("canvas");
//you can also do this with classes.

while (canvasses.length > 0) {
    for (let i =0; i < canvasses.length; i++) {
        canvasses[i].remove();
    }
}

- Laurent Dhont