jQuery "fadeOut" & "remove"

Hi

I'm trying to give a fadeout & delete to a DIV(id = "notification"), when a image is clicked. This is how I'm doing that:

<a onclick="$("#notification").fadeOut(300,function() { $("#notification").remove(); });" class="notificationClose "><img src="close.png"/></a>

This seems to not be working. What I need to do to fix this?

Thanks

From stackoverflow

• Have you tried this?

  $("#notification").fadeOut(300, function(){ 
      $(this).remove();
  });
  

  That is, using the current this context to target the element in the inner function and not the id. I use this pattern all the time - it should work.

• Try this:

  <a onclick='$("#notification").fadeOut(300, function() { $(this).remove(); });' class="notificationClose "><img src="close.png"/></a>
  

  I think your double quotes around the onclick were making it not work. :)

  EDIT: As pointed out below, inline javascript is evil and you should probably take this out of the onclick and move it to jQuery's click() event handler. That is how the cool kids are doing it nowadays.

  DrJokepu : +1 how could I possibly overlook this :)

  Nick Berardi : You shouldn't use JavaScript inline, because it makes it hard to change in a consistent way.

  Paolo Bergantino : I don't condone it, I'm just helping the guy out with his problem. Sometimes I preach, I just woke up and I'm not in the "extra mile" mood. Your post does the job, though. :)

• you really should try to use jQuery in a separate file, not inline. Here is what you need:

  <a class="notificationClose "><img src="close.png"/></a>
  

  And then this at the bottom of your page in <script> tags at the very least or in a external JavaScript file.

  $(".notificationClose").click(function() {
      $("#notification").fadeOut("normal", function() {
          $(this).remove();
      });
  });