Creating an element that can remove it self?

问题

I'm building a lightbox as a school project, and I can't use jQuery. I've got an image. When you click it, Javascript makes a transparent div with the ID "overlay". I want the div to remove itself, or the parent to remove it but it doesn't work. I think it has to do with the fact that you cant link 'onclick' to an element that doesn't exists yet.

回答1:

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) };

回答2:

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

回答3:

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).

回答4:

I've got it :) I was doing it like bart sad, but it didn't work. my code looked something like this:

image.onclick = function(){ *create overlay*};
overlay.oncklick = function() {*overlay.parentNode.removeChild(overlay)*};

the browser goes like wtf? cause it reads the code and thinks "i cant check if the user clicked a non-existing element." So I did this:

image.onclick = function(){

*create overlay*

overlay.onclick = function() {*remove overlay*};
};

来源：https://stackoverflow.com/questions/15650131/creating-an-element-that-can-remove-it-self