jQueryで要素をゆっくり削除するにはどうすればよいですか？

179

$target.remove() 要素を削除できますが、プロセスをいくつかの感触アニメーションで停止したいのですが、どうすればよいですか？

javascript  jquery 
— マスク
ソース

回答:

355 
$target.hide('slow');

または

$target.hide('slow', function(){ $target.remove(); });

アニメーションを実行してDOMから削除する

— グレッグ
ソース
7
.remove（）メソッドは、DOMからノードを非常に明確に削除します。.hide（）メソッドは、表示属性を変更するだけで、表示されませんが、まだ存在しています。
— micahwittman、2009年
2
@Envilポスターは、それをゆっくりと取り除く方法を尋ねました。.remove（）はすぐにそれを行います。
— pixelearth 2017
4
@pixelearthを$(this).remove()コールバック関数の内部に配置します。それはより良い働きをする$target.remove()
— Envil
20

要素を非表示にしてから削除する必要がある場合は、hideメソッドのコールバック関数内でremoveメソッドを使用します。

これはうまくいくはずです

$target.hide("slow", function(){ $(this).remove(); })
— ラフル
ソース
上記のコメントが答えを得たので、正しい答えを得るための+1。どういうわけか私$(this)は$targetあまりにも繰り返すよりも代わりに好きです。
— goodeye
これは、受け入れられた回答を試した後、まさに私が欲しかったものです。それは非常にスムーズに見えます:)
— Catalin Hoha
11

答えはすべて良いですが、私はそれらすべてがその専門的な「磨き」に欠けていることを発見しました。

私はこれを思い付き、フェードアウトし、上にスライドしてから削除しました：

$target.fadeTo(1000, 0.01, function(){ 
    $(this).slideUp(150, function() {
        $(this).remove(); 
    }); 
});
— SharpC
ソース
3

私はパーティーに少し遅れましたが、Google検索から来て正しい答えを見つけられなかった私のような人にとっては。誤解しないでください。ここには良い答えがありますが、正確に私が探していたものではありません。これ以上苦労せずに、私がしたことは次のとおりです。

$(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-4.css
 */

.removed-item {
    -webkit-animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards;
    -o-animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards;
    animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards
}

@keyframes removed-item-animation {
    from {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
}

@-webkit-keyframes removed-item-animation {
    from {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
}

@-o-keyframes removed-item-animation {
    from {
        opacity: 1;
        -o-transform: scale(1);
        transform: scale(1)
    }

    to {
        -o-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
</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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


</body>
</html>
スニペットを展開

— chebaby
ソース
見栄えが良いので、間違いなくここを指しています。:-)
— SharpC
0

私は自分のケースに合うようにグレッグの答えを変更しました、そしてそれはうまくいきます。ここにあります：

$("#note-items").children('.active').hide('slow', function(){ $("#note-items").children('.active').remove(); });
— ナドゥラ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.