How to fully remove temporary elements?

Question

I am dynamically adding a 'div' node inside a function that will only be needed temporarily. I have already used < parent >.removeChild to detach it and then set it to null, but I am curious to know what happens to unattached nodes created in a function when it goes out of scope?

If the nodes remain in memory but unattached:

• A) Is setting to null even necessary or does it automatically go away on return?
  • and if so is setting to null the proper way?
• B) Does anything need to be done with its properties? (such as node.style.position)
• C) If it contained additional children, would they need to be handled individually or would they go away when their unattached parent node is set to null?
• D) What tool(s) can be used to view these kinds of unattached resources?

Here is an example function for discussion purposes:

    function dpi(){
      var res={},
        div=document.createElement("div"),
        body=document.getElementsByTagName('body')[0];
      div.style.position="absolute";
      div.style.width="1in";
      div.style.height="1in";
      div.style.left="-100%";
      div.style.top="-100%";
      body.appendChild(div);
      res["xdpi"]=div.offsetWidth;
      res["ydpi"]=div.offsetHeight;
      body.removeChild(div);
      div=null;
      return res;
    }

Answer 1

JavaScript uses automatic memory management. That is, it uses a garbage collector, where anything that's not referenced will be freed up automatically. To answer your specific questions:

1. No, it is not necessary to explicitly set it to null — it'll go away when you return.
2. No; those should be taken care of automatically.
3. No; children should also be taken care of automatically.
4. Perhaps some sort of garbage collector debugger.

I should note that some older browsers have reference-counting implementations of garbage collectors, where if you have cycles (an element pointing to something else pointing back to the element, which often occurs in event listeners), they may not be collected and you'd have to break the reference explicitly, but most browsers today are smarter.

Answer 2

The garbage collector, when it runs, will seek out anything that is not connected to anything else (roughly - it has some special stuff to handle circular references that aren't connected to other things). Basically, if there is no more variable pointing to the element, it will be removed from memory at the browser's convenience. Now, that might be instant, or it might be when the browser arbitrarily decides it's using too much memory and decides to clean up a bit. I don't believe there is any specification on how the browser should garbage collect.