Como "fadeOut" e "remover" uma div no jQuery?

233

Estou tentando dar efeito fadeout a uma div e excluir essa div (id = "notification"), quando uma imagem é clicada.

É assim que estou fazendo isso:

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

Isso parece não estar funcionando. O que preciso fazer para corrigir isso?

javascript jquery RSilva
fonte
14
15 votos para a pergunta e 55 votos para a resposta ... e foi claramente apenas um erro de digitação ... wtf?
Ivan Castellanos
4
Agora são 34 e 110 :). Chegou aqui porque eu não sabia como remover um elemento APÓS que ele desaparecesse (você pode adivinhar: eu não RTFM).
orique
4
independentemente do erro de digitação, a pergunta aparece nos resultados do google e eu voto positivo quando encontro respostas rapidamente.
Valamas 26/06

Respostas:

440

Tente o seguinte:

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

Eu acho que suas aspas duplas em torno do onclickestavam fazendo isso não funcionar. :)

Edição : Como indicado abaixo, o javascript embutido é ruim e você provavelmente deve tirar isso onclicke movê-lo para o click()manipulador de eventos do jQuery . É assim que as crianças legais estão fazendo isso hoje em dia.

Paolo Bergantino
fonte
24
Você não deve usar o JavaScript embutido, pois dificulta a mudança de maneira consistente.
22411 Nick Berardi
14
Eu não desculpo, só estou ajudando o cara com seu problema. Às vezes eu prego, acabei de acordar e não estou no clima de "milha extra". Sua postagem faz o trabalho, no entanto. :)
Paolo Bergantino
Você poderia explicar como o manipulador de onclick é ruim? É apenas por causa da manutenção ou existe uma razão técnica?
panzi
2
Realmente vale a pena um arquivo separado toda vez que você deseja uma linha de JavaScript em uma página? Eu acho que o inline tem o seu lugar.
Casey
91

você realmente deve tentar usar o jQuery em um arquivo separado, não na linha. Aqui está o que você precisa:

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

E então, na parte inferior da sua página, em <script>tags, no mínimo, ou em um arquivo JavaScript externo.

$(".notificationClose").click(function() {
    $("#notification").fadeOut("normal", function() {
        $(this).remove();
    });
});
Nick Berardi
fonte
Eu tentei isso, mas não consegui fazê-lo funcionar. O link embutido acima funcionou, e os dois são praticamente idênticos. Aqui está ... jsfiddle.net/AndyMP/DBrf5
Andy
1
@ Andy: em primeiro lugar, você esqueceu de configurar a biblioteca para jQuery;) Em segundo lugar, se você a usar em seu site, você também precisará incluí-la $(document).ready(function() {e });. (no jsFiddle é onload, então faz isso por você) #
Nathan
@Nick Berardi, podemos fazê-lo com a rolagem da página para baixo?
Super Model
55

Se você o estiver usando em vários lugares diferentes, você deve transformá-lo em um plugin.

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

E depois:

// Somewhere in the program code.
$('div').fadeOutAndRemove('fast');
Sam Sehnert
fonte
Eu estava apenas olhando para como fazer isso, e para o meu propósito, o modo "plug-in" é melhor para mim, obrigado
Harag
30

Você já tentou isso?

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

Ou seja, usando a corrente neste contexto para direcionar o elemento na função interna e não o id. Eu uso esse padrão o tempo todo - ele deve funcionar.

Tamas Czinege
fonte
5

se você é como eu, vindo de uma pesquisa no google e procurando remover um elemento html com animação interessante, isso pode ajudá-lo:

$(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>
Expandir snippet

chebaby
fonte
-1

.fadeOut ('lento', isso.remove);

Alvar Vilu
fonte
-9

Usar 

.fadeOut(360).delay(400).remove();
andrewpolyakov
fonte
4
Isso não funciona, o removemétodo é chamado imediatamente após ofadeOut
Iulian Onofrei