Erstellen eines Elements, das es selbst entfernen kann?

Question

Ich baue eine Lightbox als ein Schulprojekt, und ich kann jQuery nicht verwenden. Ich habe ein Bild. Wenn Sie darauf klicken, erstellt Javascript ein transparentes Div mit der ID "overlay". Ich möchte, dass das div sich selbst entfernt, oder das übergeordnete Element, um es zu entfernen, aber es funktioniert nicht. Ich denke, es hat damit zu tun, dass man "onclick" nicht mit einem Element verknüpfen kann, das es noch nicht gibt.

Answer 1

Sie müssen das Element aus dem übergeordneten entfernen. Etwas wie folgt aus:

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

Oder Sie könnten es einfach verstecken:

d.style.display = 'none'; 

Und, oh: Sie können durch die Zuordnung einer Funktion zum Onclick-Attribut Javascript-Code zu einem (neu geschaffenen) Element hinzufügen.

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

Answer 2

Verwenden Sie nicht den Handler onclick im Tag, verwenden Sie JavaScript-Ereignisfunktionen wie addEventListener, um das Ereignis dynamisch zu den Elementen hinzuzufügen. Sie sollten auch sicherstellen, dass Sie beim Entfernen der Elemente alle Ihre Referenzen ordnungsgemäß bereinigen (mit anderen Worten, die Ereignishandler abmelden).

Answer 3

ich es habe :) ich tat es wie bart traurig, aber es hat nicht funktioniert. mein Code sah in etwa so aus:

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

der browser geht wie wtf? weil es den Code liest und denkt "Ich kann nicht überprüfen, ob der Benutzer auf ein nicht vorhandenes Element geklickt hat." Also habe ich das getan:

image.onclick = function(){ 

*create overlay* 

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