Remove HTML element (DOM Node) from memory

Question

According to the MDN documentation, the removeChild method removes the node from the DOM, but it is still in memory. My problem is that I want to delete it from memory. I 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 (why it returns false ).

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

 myCanvas = null; 

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

Answer 2

Just assign a different value to the myCanvas variable (e.g. null ) so that it no longer refers to canvas variables. The garbage collection will do the rest.

Of course, there is no guarantee. This assumes that there are no other variables referencing the element. Otherwise, if there are other variables, objects, etc. that still refer to this canvas element, then it is not deleted from memory at all. It becomes more difficult to remove if there are closures that contain references to the element but do not have the ability to dereference.

Answer 3

Well, your code snippet could work if you initialized the myCanvas variable without the var keyword, since these variables automatically become configurable: true and therefore can be deleted using the delete operator without any problems.

Or else, you could work with an object reference using the getElementsByClassName() method instead of separating the HTMLElement itself

- I assume that myCanvas is the result of the operation getElementById() or the like -

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

In other words, it is alive in nature, and therefore it does not need a manual operation to destroy / clear links.

Answer 4

The main answer is that all variables that refer to the canvas must be set to undefined so that the garbage collector can do its job. But sometimes it’s not so simple in practice.

Here are some tricky situations that I encountered while trying to completely remove dynamically created HTML canvas elements in order to avoid memory leaks:

(1) The methods that I added to the canvas element contained their own references to it (creating a loop). I fixed this by deleting all user properties when deleting 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 refer to the canvas. Fixed by setting them all to undefined :

 _myVar = myBuilder = myObserver = undefined; 

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

 ctx = undefined;