Creating an element that can remove it self?

Don't use the onclick handler in the tag, use Javascripts event functions such as addEventListener to dynamically add the event to the elements. You should also make sure that when you remove the elements you properly clean up all your references (in other words, unregister the event handlers).


You have to remove the element from the parent. Something like this:

d = document.getElementById('overlay');
d.parentNode.removeChild(d);

Or you could just hide it:

d.style.display = 'none';

And, oh: you can add Javascript code to a (newly created) element by assigning a function to the onclick attribute.

d = document.createElement('div');
d.onclick = function(e) { this.parentNode.removeChild(this) };

You can remove the element like the following

var el = document.getElementById('div-02');
el.remove(); // Removes the div with the 'div-02' id

Click here for more details