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