我是否需要移除或删除我创建但未附加到 DOM 的 HTML 元素？

Question

我正在对我拥有的一些（高级）图表实施客户端下载。我现在正在做的是获取图表的 SVG 源，创建一个 "canvas" 元素并将 SVG 绘制到所述元素，然后使用 toBlob/Filesaver.js 下载图像。请参阅下面的代码：

// draw the svg to a canvas
var c = document.createElement("canvas");
canvg(c, file);

// scrape the image from the canvas as png or jpg and download it in full quality
c.toBlob(function (blob) {
  saveAs(blob, fileName);
}, contentType, 1);

现在下载工作正常，但似乎我创建的 canvas 元素 c 已附加到 window 并且即使在下载完成。

呼叫 c.remove() 没有帮助。 c.parentNode 和 c.parentElement 为空（显然因为我没有将 c 附加到 DOM）所以我不能调用 removeChild(c) 任何东西。

我想知道如何 remove/delete 元素 c？ c = undefined/null 够好吗？有没有更优雅的方式？

Answer 1

一旦 c 超出范围，它应该自动收集垃圾，因此只要 canvg 不保留不必要的引用它。

为了确保 c 最终不再可引用，请将整个代码放入 IIFE 中：

(() => {
  // draw the svg to a canvas
  var c = document.createElement("canvas");
  canvg(c, file);

  // scrape the image from the canvas as png or jpg and download it in full quality
  c.toBlob(function (blob) {
    saveAs(blob, fileName);
  }, contentType, 1);
})();

（否则，它将保持 window.c）

Answer 2

是的，之前的答案是正确的，但您也可以通过设置它的最小尺寸来清除 canvas

(() => {
     var c = document.createElement("canvas");
      canvg(c, file);
      c.toBlob(function (blob) {
              saveAs(blob, fileName);
              c.width = c.height = 0;
      }, contentType, 1); 
})()

我是否需要移除或删除我创建但未附加到 DOM 的 HTML 元素？

Do I need to remove or delete HTML elements that I created but didn't attach to the DOM?

html

javascript

dom

canvg