Tworzenie elementu, który może go sam usunąć?

Question

Buduję lightbox jako projekt szkolny i nie mogę używać jQuery. Mam obraz. Po kliknięciu, JavaScript tworzy przezroczysty element div z identyfikatorem "nakładka". Chcę, aby div usunął się, lub rodzic, aby go usunąć, ale to nie działa. Myślę, że ma to związek z tym, że nie możesz połączyć "onclick" z elementem, który jeszcze nie istnieje.

Answer 1

Musisz usunąć element z rodzica. Coś takiego:

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

Albo może po prostu schować go:

d.style.display = 'none'; 

I, oh: można dodać kod JavaScript do (nowo utworzone) elementu poprzez przypisanie funkcji do atrybutu onclick.

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

Answer 2

Nie używaj znacznika onclick w znaczniku, użyj funkcji zdarzeń JavaScript, takich jak addEventListener, aby dynamicznie dodawać zdarzenia do elementów. Powinieneś również upewnić się, że po usunięciu elementów poprawnie wyczyścisz wszystkie swoje referencje (innymi słowy, wyrejestruj procedury obsługi zdarzeń).

Answer 3

mam go :) robiłem go jak bart smutny, ale to nie działa. mój kod wyglądał mniej więcej tak:

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

przeglądarka działa jak wtf? bo czyta kod i myśli "Nie mogę sprawdzić, czy użytkownik kliknął nieistniejący element." Zrobiłem to:

image.onclick = function(){ 

*create overlay* 

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