260

I'm trying to give fadeout effect to a div & delete that div(id = "notification"), when an 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 do I need to do to fix this?

Fábio Perez
  • 23,850
  • 22
  • 76
  • 100
RSilva
  • 6,753
  • 11
  • 43
  • 49
  • 14
    15 votes for the question and 55 votes for the answer... and it was clearly just a typo... wtf? – Ivan Castellanos Jan 20 '12 at 00:13
  • 5
    Now is 34 and 110 :). Landed here because I didn't know how to remove a element AFTER it faded out (you may guess: I didn't RTFM). – orique Mar 04 '13 at 15:35
  • 5
    regardless of the typo, the question appears in google results and I upvote when I find answers quickly. – Valamas Jun 26 '13 at 05:47
  • well it doesn't really matter if the question had a typo in it. I for one searched for it because i wanted to know how to do it. The question asked what i wanted to ask, and there was a working answer. Therefore upvotes. – John Lord Jun 11 '21 at 16:08

7 Answers7

485

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.

Paolo Bergantino
  • 480,997
  • 81
  • 517
  • 436
  • 27
    You shouldn't use JavaScript inline, because it makes it hard to change in a consistent way. – Nick Berardi Feb 16 '09 at 14:17
  • 17
    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. :) – Paolo Bergantino Feb 16 '09 at 14:20
  • Could you elaborate on how the onclick handler is evil? Is it just because of maintainability or is there a technical reason? – panzi Feb 19 '12 at 01:38
  • 3
    Is it really worth a separate file every time you want one line of JavaScript on a page? I think inline has its place. – Casey Jun 03 '14 at 18:35
99

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();
    });
});
Nick Berardi
  • 54,393
  • 15
  • 113
  • 135
  • I tried this but couldn't get it to work. The inline link above did work, and the two are practically identical. Here it is... http://jsfiddle.net/AndyMP/DBrf5/ – Andy Dec 01 '11 at 12:18
  • 1
    @Andy: first of all you forgot to set the library to jQuery ;) Second, if you use it on your site you also need to wrap it in `$(document).ready(function() {` and `});`. (on jsFiddle it is onload so it does that for you) – Nathan Jan 01 '12 at 04:02
  • @Nick Berardi, can we do it with page down scroll ? – Billu Sep 21 '17 at 08:34
60

If you're using it in several different places, you should turn it into a plugin.

jQuery.fn.fadeOutAndRemove = function(speed){
    $(this).fadeOut(speed,function(){
        $(this).remove();
    })
}

And then:

// Somewhere in the program code.
$('div').fadeOutAndRemove('fast');
Sam Sehnert
  • 2,933
  • 1
  • 20
  • 25
  • 1
    I was just looking at how to do this, and for my purpose, the "plugin" way is better for me, thanks – Harag Feb 13 '12 at 15:22
36

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.

Tamas Czinege
  • 118,853
  • 40
  • 150
  • 176
7

if you are anything like me coming from a google search and looking to remove an html element with cool animation, then this could help you:

$(document).ready(function() {
    
    var $deleteButton = $('.deleteItem');

    $deleteButton.on('click', function(event) {
    
        event.preventDefault();

        var $button = $(this);

        if(confirm('Are you sure about this ?')) {

            var $item = $button.closest('tr.item');

            $item.addClass('removed-item')

                .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {

                    $(this).remove();
            });
        }
      
    });
    
});
/**
 * Credit to Sara Soueidan
 * @link https://github.com/SaraSoueidan/creative-list-effects/blob/master/css/styles-3.css
 */

.removed-item {
    animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29)
}

@keyframes removed-item-animation {
    0% {
        opacity: 1;
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        transform: translateX(-800px)
    }
}

@-webkit-keyframes removed-item-animation {
    0% {
        opacity: 1;
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        -webkit-transform: translateX(50px);
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        transform: translateX(-800px)
    }
}

@-o-keyframes removed-item-animation {
    0% {
        opacity: 1;
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        transform: translateX(-800px)
    }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>id</th>
        <th>firstname</th>
        <th>lastname</th>
        <th>@twitter</th>
        <th>action</th>
      </tr>
    </thead>
    <tbody>
      
      <tr class="item">
        <td>1</td>
        <td>Nour-Eddine</td>
        <td>ECH-CHEBABY</td>
        <th>@__chebaby</th>
        <td><button class="btn btn-danger deleteItem">Delete</button></td>
      </tr>
      
      <tr class="item">
        <td>2</td>
        <td>John</td>
        <td>Doe</td>
        <th>@johndoe</th>
        <td><button class="btn btn-danger deleteItem">Delete</button></td>
      </tr>
      
      <tr class="item">
        <td>3</td>
        <td>Jane</td>
        <td>Doe</td>
        <th>@janedoe</th>
        <td><button class="btn btn-danger deleteItem">Delete</button></td>
      </tr>
    </tbody>
  </table>
  
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />


</body>
</html>
chebaby
  • 7,362
  • 50
  • 46
1

.fadeOut('slow', this.remove);

Alvar Vilu
  • 29
  • 1
-10

Use 

.fadeOut(360).delay(400).remove();
andrewpolyakov
  • 1