Detached DOM nodes

detached

// create an element to attach to document
var d = document.createElement('div');

// take heap snapshot and filter on 'detached' will show the above node
// now attach element to document
document.body.appendChild(d);

// take heap snapshot and the detached node is no longer listed
// you can look at diff between two snapshots and see it has been added to HTMLBodyElement

// so we can see the div add some styles
d.style.border = '2px solid deeppink';
d.style.background = 'hotpink';
d.style.height = '100px';

// now lets see if hiding element detaches the node
d.style.display = 'none';

// inspect and you will see the node is not detached
// display element and lets try visibility
d.style.display = 'block';

// same result if you use
d.style.visibility = 'hidden';

// show element and now remove the element from the document
d.style.visibility = 'inherit';
document.body.removeChild(d);

// the snapshot will now contain the removed element as a detached node
// to cleanup this node we must delete the reference being held in JavaScript

d = null;

// the detached node is now removed