Comment «fadeOut» et «supprimer» un div dans jQuery?

233

J'essaie de donner un effet de fondu à un div et de le supprimer (id = "notification"), lorsqu'une image est cliquée.

Voici comment je fais ça:

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

Cela ne semble pas fonctionner. Que dois-je faire pour résoudre ce problème?

javascript  jquery 
— RSilva
source
14
15 votes pour la question et 55 votes pour la réponse ... et ce n'était clairement qu'une faute de frappe ... wtf?
— Ivan Castellanos
4
Est maintenant 34 et 110 :). J'ai atterri ici parce que je ne savais pas comment supprimer un élément APRÈS sa disparition (vous pouvez deviner: je n'ai pas RTFM).
— orique
4
quelle que soit la faute de frappe, la question apparaît dans les résultats de google et je vote positivement lorsque je trouve des réponses rapidement.
— Valamas

Réponses:

440

Essaye ça:

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

Je pense que vos doubles guillemets autour de la onclickfont que ça ne fonctionne pas. :)

EDIT : Comme indiqué ci-dessous, le javascript en ligne est mauvais et vous devriez probablement le retirer du onclicket le déplacer vers le click()gestionnaire d'événements de jQuery . C'est ainsi que les enfants cool le font de nos jours.

— Paolo Bergantino
source
24
Vous ne devez pas utiliser JavaScript en ligne, car il est difficile de changer de manière cohérente.
— Nick Berardi
14
Je ne pardonne pas, j'aide juste le gars avec son problème. Parfois je prêche, je viens de me réveiller et je ne suis pas d'humeur "extra mile". Votre message fait le travail, cependant. :)
— Paolo Bergantino
Pourriez-vous nous expliquer en quoi le gestionnaire onclick est mauvais? Est-ce simplement pour des raisons de maintenabilité ou pour une raison technique?
— panzi
2
Vaut-il vraiment un fichier séparé chaque fois que vous voulez une ligne de JavaScript sur une page? Je pense que l'inline a sa place.
— Casey
91

vous devriez vraiment essayer d'utiliser jQuery dans un fichier séparé, pas en ligne. Voici ce dont vous avez besoin:

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

Et puis cela au bas de votre page dans des <script>balises au moins ou dans un fichier JavaScript externe.

$(".notificationClose").click(function() {
    $("#notification").fadeOut("normal", function() {
        $(this).remove();
    });
});
— Nick Berardi
source
J'ai essayé mais je n'ai pas réussi à le faire fonctionner. Le lien en ligne ci-dessus a fonctionné et les deux sont pratiquement identiques. Le voici ... jsfiddle.net/AndyMP/DBrf5
— Andy
1
@Andy: tout d'abord, vous avez oublié de définir la bibliothèque sur jQuery;) Deuxièmement, si vous l'utilisez sur votre site, vous devez également l'envelopper dans $(document).ready(function() {et });. (sur jsFiddle c'est onload donc ça fait ça pour vous)
— Nathan
@ Nick Berardi, pouvons-nous le faire avec le défilement de la page suivante?
— Super Model
55

Si vous l'utilisez à plusieurs endroits différents, vous devez le transformer en plugin.

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

Puis:

// Somewhere in the program code.
$('div').fadeOutAndRemove('fast');
— Sam Sehnert
source
Je cherchais juste comment faire cela, et pour mon but, la façon "plugin" est meilleure pour moi, merci
— Harag
30

Avez-vous essayé cela?

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

Autrement dit, en utilisant le courant ce contexte pour cibler l'élément dans la fonction intérieure et non l'id. J'utilise ce modèle tout le temps - cela devrait fonctionner.

— Tamas Czinege
source
5

si vous êtes comme moi venant d'une recherche google et que vous cherchez à supprimer un élément html avec une animation sympa, cela pourrait vous aider:

$(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 {
    -webkit-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);
    -o-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);
    animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29)
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        opacity: 0;
        -o-transform: translateX(-800px);
        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>
Développer l'extrait

— chebaby
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.