How to fadeOut remove a div in jQuery

Question

I m trying to give fadeout effect to a div  amp  delete that div id    notification    when an image is clicked   This is how I m doing that    lt a onclick      notification   fadeOut 300 function         notification   remove         class  notificationClose   gt  lt img src  close png   gt  lt  a gt    This seems to not be working  What do I need to do to fix this

User · Answer

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:

_x000D_

$(document).ready(function() {_x000D_
    _x000D_
    var $deleteButton = $('.deleteItem');_x000D_
_x000D_
    $deleteButton.on('click', function(event) {_x000D_
    _x000D_
        event.preventDefault();_x000D_
_x000D_
        var $button = $(this);_x000D_
_x000D_
        if(confirm('Are you sure about this ?')) {_x000D_
_x000D_
            var $item = $button.closest('tr.item');_x000D_
_x000D_
            $item.addClass('removed-item')_x000D_
_x000D_
                .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {_x000D_
_x000D_
                    $(this).remove();_x000D_
            });_x000D_
        }_x000D_
      _x000D_
    });_x000D_
    _x000D_
});

_x000D_

/**_x000D_
 * Credit to Sara Soueidan_x000D_
 * @link https://github.com/SaraSoueidan/creative-list-effects/blob/master/css/styles-3.css_x000D_
 */_x000D_
_x000D_
.removed-item {_x000D_
    -webkit-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);_x000D_
    -o-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);_x000D_
    animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29)_x000D_
}_x000D_
_x000D_
@keyframes removed-item-animation {_x000D_
    0% {_x000D_
        opacity: 1;_x000D_
        -webkit-transform: translateX(0);_x000D_
        -ms-transform: translateX(0);_x000D_
        -o-transform: translateX(0);_x000D_
        transform: translateX(0)_x000D_
    }_x000D_
_x000D_
    30% {_x000D_
        opacity: 1;_x000D_
        -webkit-transform: translateX(50px);_x000D_
        -ms-transform: translateX(50px);_x000D_
        -o-transform: translateX(50px);_x000D_
        transform: translateX(50px)_x000D_
    }_x000D_
_x000D_
    80% {_x000D_
        opacity: 1;_x000D_
        -webkit-transform: translateX(-800px);_x000D_
        -ms-transform: translateX(-800px);_x000D_
        -o-transform: translateX(-800px);_x000D_
        transform: translateX(-800px)_x000D_
    }_x000D_
_x000D_
    100% {_x000D_
        opacity: 0;_x000D_
        -webkit-transform: translateX(-800px);_x000D_
        -ms-transform: translateX(-800px);_x000D_
        -o-transform: translateX(-800px);_x000D_
        transform: translateX(-800px)_x000D_
    }_x000D_
}_x000D_
_x000D_
@-webkit-keyframes removed-item-animation {_x000D_
    0% {_x000D_
        opacity: 1;_x000D_
        -webkit-transform: translateX(0);_x000D_
        transform: translateX(0)_x000D_
    }_x000D_
_x000D_
    30% {_x000D_
        opacity: 1;_x000D_
        -webkit-transform: translateX(50px);_x000D_
        transform: translateX(50px)_x000D_
    }_x000D_
_x000D_
    80% {_x000D_
        opacity: 1;_x000D_
        -webkit-transform: translateX(-800px);_x000D_
        transform: translateX(-800px)_x000D_
    }_x000D_
_x000D_
    100% {_x000D_
        opacity: 0;_x000D_
        -webkit-transform: translateX(-800px);_x000D_
        transform: translateX(-800px)_x000D_
    }_x000D_
}_x000D_
_x000D_
@-o-keyframes removed-item-animation {_x000D_
    0% {_x000D_
        opacity: 1;_x000D_
        -o-transform: translateX(0);_x000D_
        transform: translateX(0)_x000D_
    }_x000D_
_x000D_
    30% {_x000D_
        opacity: 1;_x000D_
        -o-transform: translateX(50px);_x000D_
        transform: translateX(50px)_x000D_
    }_x000D_
_x000D_
    80% {_x000D_
        opacity: 1;_x000D_
        -o-transform: translateX(-800px);_x000D_
        transform: translateX(-800px)_x000D_
    }_x000D_
_x000D_
    100% {_x000D_
        opacity: 0;_x000D_
        -o-transform: translateX(-800px);_x000D_
        transform: translateX(-800px)_x000D_
    }_x000D_
}

_x000D_

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

_x000D_

User · Answer

you really should try to use jQuery in a separate file  not inline   Here is what you need    lt a class  notificationClose   gt  lt img src  close png   gt  lt  a gt    And then this at the bottom of your page in  lt script gt  tags at the very least or in a external JavaScript file       notificationClose   click function             notification   fadeOut  normal   function               this  remove

User · Answer

fadeOut  slow   this remove

User · Answer

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

User · Answer

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

User · Answer

Try this    lt a onclick      notification   fadeOut 300  function       this  remove         class  notificationClose   gt  lt img src  close png   gt  lt  a gt    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

User · Answer

Use    fadeOut 360  delay 400  remove

[javascript] How to "fadeOut" & "remove" a div in jQuery?

Examples related to javascript

Examples related to jquery