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

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