Remove HTML element (DOM Node) from memory

Question

according to mdn documentation the method removeChild removes a node from the DOM but it still resides in memory. My problem is that I want to delete it from memory as well. I've tried with the delete operator but the object is still there...

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

Answer 1

Read http://perfectionkills.com/understanding-delete/ . The delete operator is not for variables (that's why it returns false ).

If you want to remove the variable's reference to the DOM node, use

myCanvas = null;

to overwrite the value. Usually you never need to do this, because the garbage collector of JS does all the work for you.

Answer 2

Just assign another value to myCanvas variable (like null ) so that no more variables reference the canvas element. Garbage Collection will do the rest.

Of course, there is no guarantee. This assumes that there are no other variables referencing the element as well. Otherwise, if there are other variables, objects etc. that still reference that canvas element, then it's not removed from memory at all. This gets harder to remove if there are closures that contain the references to the element but have no way to dereference.

Answer 3

Well, your code snippet could have worked if you initialized your myCanvas variable without the var keyword since these variables become configurable: true automatically and thus can be disposed of with the delete operator without any hassle.

Or else, you could have worked with the object reference off the getElementsByClassName() method instead of off the individual HTMLElement itself

-- I'm assuming here that myCanvas is the result of a getElementById() operation or the like --

Because the HTMLCollection generated by the getElementsByClassName() will update itself and remove any reference to the DOM object in question as soon as it's removed from the tree.

In other words, it's live by nature, and therefore it doesn't need any manual operation to destruct/purge the references.

Answer 4

The basic answer is that all variables referencing the canvas need to be set to undefined so that the garbage collector can do its job. But sometimes it's not so simple in practice.

Here are several tricky situations I came across when trying to completely remove dynamically-created HTML canvas elements to avoid memory leaks:

(1) Methods I had added to the canvas element held their own references to it (creating a cycle). I fixed this by deleting all custom properties when removing the canvas:

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

(2) Internal variables in other objects still referenced the canvas. Fixed by setting them all to undefined :

_myVar = myBuilder = myObserver = undefined;

(3) A variable referenced the canvas' context: var ctx = myCanvas.getContext('2d'); This held on to the canvas in some browsers (even after setting myCanvas = undefined ). Fixed by clearing that variable too:

ctx = undefined;