如何用jQuery慢慢刪除元素？

298

$target.hide('slow');

或

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

運行動畫，然後從DOM

刪除它

來源

2009-11-27 07:09:39 Greg

+6

的一個.remove（）方法非常特別是從DOM中刪除節點。 .hide（）方法只改變顯示屬性，使其不可見，但仍然存在。 – micahwittman 2009-11-27 07:19:34

+5

$（this）.remove（）效果更好。 – Envil 2017-02-13 11:01:11

+1

@Envil海報問如何慢慢刪除它。 .remove（）立即執行。 – pixelearth 2017-09-15 03:33:43

85

target.fadeOut(300, function(){ $(this).remove();});

或

$('#target_id').fadeOut(300, function(){ $(this).remove();});

重複：How to "fadeOut" & "remove" a div in jQuery?

來源

2009-11-27 07:06:56 micahwittman

-3

你的意思是像

$target.hide('slow')

？

來源

2009-11-27 07:10:41

+0

是的，但我也需要在動畫之後將其刪除。 – Mask 2009-11-27 07:12:58

12

如果需要隱藏然後刪除該元素，請使用隱藏方法的回調函數內的remove方法。

這應該工作

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

來源

2009-11-27 07:13:04 rahul

+0

+1因爲上面的評論得到答案是正確的。不知何故，我喜歡'$（this）'而不是重複'$ target'。 – goodeye 2012-05-03 01:19:55

0

您需要調用remove方法之前，使用動畫。

請參見：jQuery slideUp().remove() doesn't seem to show the slideUp animation before remove occurs

來源

2009-11-27 07:13:54 Jonathan

14

$('#ur_id').slideUp("slow", function() { $('#ur_id').remove();});

來源

2013-07-01 07:09:20 zohaib

0

我修改Greg的回答適合我的情況下，和它的作品。這裏是：

$("#note-items").children('.active').hide('slow', function(){ $("#note-items").children('.active').remove(); });

來源

2014-09-22 23:42:27 nadula

1

所有的答案都很好，但我發現他們都缺乏專業的「波蘭語」。我想出了這個，淡出，向上滑動，然後取出：

$target.fadeTo(1000, 0.01, function(){ 
    $(this).slideUp(150, function() { 
     $(this).remove(); 
    }); 
});

來源

2017-09-29 19:05:25 SharpC

0

我有點遲到了，但任何人都像我一樣，從谷歌搜索出來，並沒有找到正確的答案。不要誤會我在這裏有很好的答案，但不正是我一直在尋找，事不宜遲，這裏是我做過什麼：

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

來源

2017-10-07 23:13:37 chebaby

如何用jQuery慢慢刪除元素？

回答

相關問題