Skip to content

Instantly share code, notes, and snippets.

@jsteenkamp

jsteenkamp/detached

Last active Aug 29, 2015
Embed
What would you like to do?
Detached DOM nodes
// 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.