Menu
detach() method is the same as . remove() , except that . detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.
The detach() method removes the selected elements, including all text and child nodes.
The jQuery stop() method is used to stop an animation or effect before it is finished. The stop() method works for all jQuery effect functions, including sliding, fading and custom animations.
$target.hide('slow');
or
$target.hide('slow', function(){ $target.remove(); });
to run the animation, then remove it from DOM
target.fadeOut(300, function(){ $(this).remove();});
or
$('#target_id').fadeOut(300, function(){ $(this).remove();});
Duplicate: How to "fadeOut" & "remove" a div in jQuery?
If you need to hide and then remove the element use the remove method inside the callback function of hide method.
This should work
$target.hide("slow", function(){ $(this).remove(); })
$('#ur_id').slideUp("slow", function() { $('#ur_id').remove();});
All the answers are good, but I found they all lacked that professional "polish".
I came up with this, fading out, sliding up, then removing:
$target.fadeTo(1000, 0.01, function(){
$(this).slideUp(150, function() {
$(this).remove();
});
});
I'm little late to the party, but for anyone like me that came from a Google search and didn't find the right answer. Don't get me wrong there are good answers here, but not exactly what I was looking for, without further ado, here is what I did:
$(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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With