Creazione di un elemento che può rimuoverlo da solo?

Question

Sto costruendo un lightbox come progetto scolastico e non posso usare jQuery. Ho un'immagine Quando lo fai clic, Javascript crea un div trasparente con l'ID "overlay". Voglio che il div si rimuova o che il genitore lo rimuova ma non funziona. Penso che abbia a che fare con il fatto che non puoi collegare "onclick" a un elemento che non esiste ancora.

Answer 1

È necessario rimuovere l'elemento dal genitore. Qualcosa di simile a questo:

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

Oppure si potrebbe semplicemente nasconderlo:

d.style.display = 'none'; 

E, oh: è possibile aggiungere codice Javascript ad un elemento (appena creato) assegnando una funzione per l'attributo onclick.

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

Answer 2

Non utilizzare il gestore onclick nel tag, utilizzare le funzioni di evento Javascripts come addEventListener per aggiungere dinamicamente l'evento agli elementi. Dovresti anche assicurarti che quando rimuovi gli elementi pulisci correttamente tutti i tuoi riferimenti (in altre parole, annulla la registrazione dei gestori di eventi).

Answer 3

li ho :) lo facevo come Bart triste, ma non ha funzionato. il mio codice era simile al seguente:

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

il browser funziona come wtf? perché legge il codice e pensa "Non posso controllare se l'utente ha fatto clic su un elemento non esistente." Quindi ho fatto questo:

image.onclick = function(){ 

*create overlay* 

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