Javascript 从内存中删除HTML元素（DOM节点）

根据方法

removeChild

从DOM中删除一个节点，但它仍然驻留在内存中。 我的问题是，我想把它从内存中删除。 我尝试了

删除
操作符，但对象仍然存在

myCanvas.parentElement.removeChild(myCanvas);  // myCanvas actually removed from DOM
delete myCanvas;  // false. does nothing
alert(myCanvas); // shows HTMLCanvasElement instead of undefined

只需将另一个值赋给
myCanvas
变量（如
null
），这样就不会有更多变量引用canvas元素。垃圾收集将完成剩下的工作

当然，这不能保证。这假设没有其他变量引用元素。否则，如果还有其他变量、对象等仍然引用该画布元素，则它根本不会从内存中删除。如果存在包含对元素的引用但无法取消引用的闭包，则很难删除该闭包。
Read。delete运算符不适用于变量（这就是为什么它返回
false
）

如果要删除变量对DOM节点的引用，请使用

myCanvas = null;

以覆盖该值。通常您不需要这样做，因为JS的垃圾收集器为您完成所有工作。
好吧，如果在不使用
var
关键字的情况下初始化
myCanvas
变量，则代码片段可能会工作，因为这些变量会自动变为
configurable:true
，因此可以使用
delete
操作符轻松处理

或者，您可以使用
getElementsByClassName（）
方法之外的对象引用，而不是单个
HTMLElement
本身

--这里我假设
myCanvas
是
getElementById（）
操作或类似操作的结果--

因为
getElementsByClassName（）
生成的
HTMLCollection
将在从树中删除相关DOM对象后立即更新自身并删除对该对象的任何引用

换句话说，它本质上是活动的，因此不需要任何手动操作来销毁/清除引用
 基本答案是引用画布的所有变量都需要设置为
undefined
，以便垃圾收集器可以完成其工作。但有时在实践中并不那么简单

以下是我在尝试完全删除动态创建的HTML画布元素以避免内存泄漏时遇到的几个棘手情况：

（1） 我添加到canvas元素的方法保存了它们自己对它的引用（创建一个循环）。我通过删除画布时删除所有自定义属性修复了此问题：

function deleteAllProperties(obj) {
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            delete obj[key];
        }
    }
}
deleteAllProperties(myCanvas);
myCanvas = undefined;

（2） 其他对象中的内部变量仍然引用画布。通过将它们全部设置为未定义来修复：

_myVar = myBuilder = myObserver = undefined;

（3） 一个变量引用了canvas'context:
var ctx=myCanvas.getContext（'2d'）在某些浏览器中，这会保留在画布上（即使在设置
myCanvas=undefined
之后）。也可以通过清除该变量进行修复：

ctx = undefined;

出于好奇，我可以问一下原因吗？从任何地方取消引用
myCanvas
，将变量设置为
null
，因为我的js应用程序正在动态创建和删除许多图像（canvas），我想确保我没有创建任何内存泄漏。谢谢，同时我也说到了同样的问题。在我的真实示例中，它不起作用（这就是我来到这里的原因），因为我忘了将myCanvas的一个引用设置为null