I can add an overlay, but I can't remove it (jQuery)

Question

This function adds an overlay with the following properties to the entire browser screen, ``` $('a.cell').click(function() { $('

').appendTo('body').fadeIn("slow"); }); #overlay { background-color: black; width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: none; z-index: 100; opacity: 0.5; } ``` And this function is supposed to remove it. ``` $('#overlay').click(function() { $(this).fadeOut("slow").remove(); }); ``` But it seems to do absolutely nothing and now my page is stuck with a black overly over it. What's wrong with the removal?

Accepted Answer

The problem is that when you're adding the `click` handler, there isn't any overlay, so you're adding the handler to an empty set of elements.

To fix this, use the live method to bind your handler to all elements that match `#overlay`, whenever they are created.

Also, `fadeOut` is not a blocking call, so it returns before the element finishes fading out. Therefore, you're calling `remove` right after the element starts fading out.

To fix this, use `fadeOut`'s callback parameter to call `remove` after the animation finishes.

For example:

```
$('#overlay').live(function() { 
    $(this).fadeOut("slow", function() { $(this).remove(); });
});
```

I can add an overlay, but I can't remove it (jQuery)

Solution

Problem