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
From stackoverflow
-
function removeElement(divNum) { var d = document.getElementById('myDiv'); var olddiv = document.getElementById(divNum); d.removeChild(olddiv); }
-
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 }
Crescent Fresh : 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.Chetan Sastry : that's true. I will edit the answer. thanks. -
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]); } } }
Armadillo : You 're right. I'm going to correct my script with your suggestions.Chetan Sastry : 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.KooiInc : @Chetan: that's right, div allready added to the DOM tree, my mistake. Wouldn't the div be dereferenced anyway upon function completion?Chetan Sastry : @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
0 comments:
Post a Comment