262

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?

Improve this question
4
  • 14
    15 votes for the question and 55 votes for the answer... and it was clearly just a typo... wtf?
    – Ivan Castellanos
    Commented Jan 20, 2012 at 0: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
    Commented Mar 4, 2013 at 15:35
  • 5
    regardless of the typo, the question appears in google results and I upvote when I find answers quickly.
    – Valamas
    Commented Jun 26, 2013 at 5: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
    Commented Jun 11, 2021 at 16:08

7 Answers 7

Reset to default
488

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.

Improve this answer
4
  • 27
    You shouldn't use JavaScript inline, because it makes it hard to change in a consistent way.
    – Nick Berardi
    Commented Feb 16, 2009 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
    Commented Feb 16, 2009 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
    Commented Feb 19, 2012 at 1: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
    Commented Jun 3, 2014 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();
    });
});
Improve this answer
3
  • 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... jsfiddle.net/AndyMP/DBrf5
    – Andy
    Commented Dec 1, 2011 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
    Commented Jan 1, 2012 at 4:02
  • @Nick Berardi, can we do it with page down scroll ?
    – Muhammad Bilal
    Commented Sep 21, 2017 at 8:34
61

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');
Improve this answer
1
  • 1
    I was just looking at how to do this, and for my purpose, the "plugin" way is better for me, thanks
    – Harag
    Commented Feb 13, 2012 at 15:22
37

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.

Improve this answer
9

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>

Improve this answer
2

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

Improve this answer
0
-10

Use 

.fadeOut(360).delay(400).remove();
Improve this answer
1
  • 4
    This doesn't work, the remove method gets called immediately after the fadeOut
    – Iulian Onofrei
    Commented Jul 22, 2014 at 10:55

Not the answer you're looking for? Browse other questions tagged or ask your own question.