Home/ Questions/Q 6621055
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T21:11:21+00:00

I create many new page elements (in some arbitrary hierarchy) using document.createElement and have

  • 0

I create many new page elements (in some arbitrary hierarchy) using document.createElement and have been using element.removeChild() to erase elements I no longer want. I was wondering if this would correctly clean up all of the sub-elements as well, or if I should be using some sort of recursive function. Javascript uses a garbage collector, so I shouldn’t need to worry about this, right?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Using element.removeChild(childElement) will remove the nodes from your document tree. If you’ve got a reference to the element, however, the element will not be garbage-collected (GC).

    Consider:
    Example 1 (horrible practice):

    <body><script>
var d = document.createElement("div");
document.body.appendChild(d);
document.body.removeChild(d);
//The global scope won't disappear. Therefore, the variable d will stay,
// which is a reference to DIV --> The DIV element won't be GC-ed
</script></body>

    Example 2 (bad practice):

    function foo(){
    var s = document.createElement("span");
    document.body.appendChild(s);
    s.innerHTML = "This could be a huge tree.";
    document.body.addEventListener("click", function(ev){
        alert(eval(prompt("s will still refer to the element:", "s")));
        //Use the provided eval to see that s and s.innerHTML still exist
        // Because this event listener is added in the same scope as where
        // DIV `d` is created.
    }, true);
    document.body.removeChild(s);
}
foo();

    Example 3 (good practice):

    function main(){
    //Functions defined below
    addDOM();
    addEvent();
    remove();
    //Zero variables have been leaked to this scope.

    function addDOM(){
        var d = document.createElement("div");
        d.id = "doc-rob";
        document.body.appendChild(d);
    }
    function addEvent(){
        var e = document.getElementById("doc-rob");
        document.body.addEventListener("click", function(ev){
            e && alert(e.tagName);
            //Displays alert("DIV") if the element exists, else: nothing happens.
        });
    }
    function remove(){
        var f = document.getElementById("doc-rob");
        f.parentNode.removeChild(f);
        alert(f);//f is still defined in this scope
        Function("alert('Typeof f = ' + typeof f);")(); //alert("Typeof f = undefined")
    }
}
main();
    • 0