Question

This is a follow on from a post here > How to "fadeOut" & "remove" a div in jQuery? – but we’re two years on and rather than dig that up it makes sense to make a new post.

I’ve played around with it and this works (inline JQuery)

<a onclick='$("#alert_top").fadeOut(300, function(){ $(this).remove(); });' class="alert_topClose">Link</a>

removing the div “alert_top”. But the inline link is untidy.

Attempting to achieve the same result, this doesn’t work (JQuery + link)

$(".alert_topClose").click(function(){
    $("#alert_top").fadeOut(300, function(){
        $(this).remove();
    });
});

with the link

<a class="alert_topClose">Link</a>

Any help as to why would be greatly appreciated. I can’t see what the problem is.

Answer 1

Make sure you are executing the above code in $(document).ready() or $(). If the element is not available when jQuery tries to fetch it, it cannot attach the event handler. Try this

$(function(){
  $(".alert_topClose").click(function(){
    $("#alert_top").fadeOut(300, function(){
      $(this).remove();
    });
  });
});