How can a object self destruct on an event, in javascript?

Question

I have this function, to create a DIV on-the-fly. But now, I want to destroy this object on onclick event, but I just don't know how.

function creatediv(id) {

    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', id);
    newdiv.onclick=function(){this=null;};  //bad function
    document.body.appendChild(newdiv);

} 

What am I missing?

Thanks

Informality

Answer 1

Just setting it null will not destroy it. You need to remove it from the document tree while making sure there are no references pointing to it.

function creatediv(id) {
    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', id);
    newdiv.onclick=function(e) {
        this.parentNode.removeChild(this);
    };  
    document.body.appendChild(newdiv);
    newdiv = null;//required in IE to prevent memory leak
}

Younger

Wha? The event target may have been a node inside newdiv. newdiv is surely being populated with other nodes in the asker's real code. In which case your code removes the wrong element from the DOM tree. – Zenobiazeolite

Answer 2

The accepted answer seems wrong to me. First, it doesn't consider newdiv containing childnodes, so the suggested remove routine maintains a danger for memory leaks via closures (IE). Second, because of the position of 'newdiv = null' the creatediv function immediately destroys the just created element. I would recommend using Douglas Crockfords purge function for the click handler, substituting d with this.

function purge(d) {
    var a = d.attributes, i, l, n;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            n = a[i].name;
            if (typeof d[n] === 'function') {
                d[n] = null;
            }
        }
    }
    a = d.childNodes;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            purge(d.childNodes[i]);
        }
    }
}

Tribromoethanol

You 're right. I'm going to correct my script with your suggestions. – Informality

You're right about the childNodes but I don't think setting newDiv to null destroys it. It just de-references the variable after it has already been added to the DOM tree. – Younger

@Chetan: that's right, div allready added to the DOM tree, my mistake. Wouldn't the div be dereferenced anyway upon function completion? – Tribromoethanol

@Renzo Kooi: Not in IE7 and older. Even upon function completion, the variable newDiv is accessible inside the event handler closure. Since the closure is now a property of newDiv element, we have a circular reference. That's why Crockford suggests to remove event handlers before removing elements – Younger

Answer 3

function removeElement(divNum) {
  var d = document.getElementById('myDiv');
  var olddiv = document.getElementById(divNum);
  d.removeChild(olddiv);
}

Tjirebon