jQueryでdivを「フェードアウト」および「削除」する方法

233

画像をクリックしたときに、divにフェードアウト効果を与え、そのdiv（id = "notification"）を削除しようとしています。

これは私がそうしている方法です：

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

これは機能していないようです。これを修正するにはどうすればよいですか？

javascript  jquery 
— RSilva
ソース
14
質問に15票、回答に55票...そしてそれは明らかにタイプミスでした... wtf？
— Ivan Castellanos
4
現在は34と110です。フェードアウトした後で要素を削除する方法がわからなかったため、ここに着陸しました（ご想像のとおり、RTFMはしていません）。
— 2013年
4
タイプミスに関係なく、質問はGoogleの検索結果に表示され、すぐに回答を見つけたら賛成票を投じます。
— Valamas 2013年

回答:

440

これを試して：

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

あなたの周りの二重引用符onclickがそれを機能させていなかったと思います。:)

編集：以下で指摘するように、インラインJavaScriptは悪用であり、おそらくこれを取り出しonclickてjQueryのclick()イベントハンドラーに移動する必要があります。それが今日のクールな子供たちのやり方です。

— パオロベルガンティーノ
ソース
24
JavaScriptをインラインで使用しないでください。一貫性のある方法で変更することが難しくなるためです。
— ニックベラルディ、
14
私はそれを容赦しません、私は彼の問題で男を手助けしているだけです。時々私は説教し、目を覚ましただけで「余計な」気分ではありません。しかし、あなたの投稿は仕事をします。:)
— Paolo Bergantino、
onclickハンドラーがどのように悪であるかについて詳しく説明していただけますか？それは単に保守性のためか、それとも技術的な理由ですか？
— panzi
2
ページにJavaScriptを1行追加するたびに、個別のファイルを作成する価値はありますか？インラインにはその場所があると思います。
— ケーシー
91

インラインではなく、別のファイルでjQueryを実際に使用する必要があります。ここにあなたが必要なものがあります：

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

そして、これは<script>少なくともページの下部のタグ、または外部JavaScriptファイルにあります。

$(".notificationClose").click(function() {
    $("#notification").fadeOut("normal", function() {
        $(this).remove();
    });
});
— ニック・ベラルディ
ソース
私はこれを試しましたが、動作させることができませんでした。上記のインラインリンクは機能し、2つは実質的に同じです。これが... jsfiddle.net/AndyMP/DBrf5
— Andy
1
@Andy：まず、ライブラリをjQueryに設定するのを忘れていました;）次に、サイトで使用する場合は、$(document).ready(function() {andでラップする必要があり});ます。（jsFiddleではオンロードなので、あなたのためにそれを行います）
— Nathan
@ニック・ベラルディ、ページダウンスクロールでそれを行うことができますか？
— スーパーモデル
55

複数の異なる場所で使用している場合は、プラグインに変換する必要があります。

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

その後：

// Somewhere in the program code.
$('div').fadeOutAndRemove('fast');
— サム・セーナート
ソース
私はこれをどのように行うかを見ているだけでした。私の目的のために、「プラグイン」の方法は私にとってより良いものです。ありがとう
— Harag
30

これを試しましたか？

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

つまり、現在のthisコンテキストを使用して、IDではなく内部関数の要素をターゲットにします。私はいつもこのパターンを使用しています-うまくいくはずです。

— タマス・チネゲ
ソース
5

あなたがグーグル検索から来て、クールなアニメーションでHTML要素を削除しようとしている私のようなものなら、これはあなたを助けるでしょう：

$(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>
スニペットを展開

— chebaby
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.