Creating an element that can remove it self?

javascript javascript-events onclick lightbox removechild
Sam picture Sam · Mar 27, 2013 · Viewed 24.7k times · Source

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.

Answer

bart picture bart · Mar 27, 2013

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

Related questions

Attaching click event to a JQuery object not yet added to the DOM

I've been having a lot of trouble attaching the click event to a JQuery object before adding it to the DOM. Basically I have this button that my function returns, then I append it to the DOM. What I want …

Read More
Catching any click performed using jQuery

the noob way to do it I guess would be $('*').click(function(){...}); But is there any way I can catch any type of click, without having to register a listener for every object in the DOM? Help would …

Read More
Make onclick function work with ENTER and "Go" button on Safari Mobile (iOS)

I have a form in which the button calls a function onclick: <form> <input type="text" id="start" name="start"> <input type="button" onclick="calcRoute();" value="Go"> </form> function calcRoute() { var start = …

Read More