145
$target.remove() puede eliminar el elemento, pero ahora quiero que el proceso se reduzca con un poco de animación, ¿cómo hacerlo?¿Cómo eliminar un elemento lentamente con jQuery?
A
Respuesta
298
$target.hide('slow');
o
$target.hide('slow', function(){ $target.remove(); });
para ejecutar la animación, posteriormente retirarlo de DOM
85
target.fadeOut(300, function(){ $(this).remove();});
o
$('#target_id').fadeOut(300, function(){ $(this).remove();});
duplicado: How to "fadeOut" & "remove" a div in jQuery?
-3
¿Quieres decir como
$target.hide('slow')
?
+0
Sí, pero también necesito eliminarlo después de la animación. – Mask
12
Si necesita ocultar y luego eliminar el elemento, utilice el método remove dentro de la función de devolución de llamada del método hide.
Esto debería funcionar
$target.hide("slow", function(){ $(this).remove(); })
+0
+1 por tener la respuesta correcta ya que los comentarios anteriores la obtuvieron. De alguna manera me gusta el '$ (this)' en lugar de repetir el '$ target' también. – goodeye
0
Es necesario utilizar una animación antes de llamar al método remove.
Ver: jQuery slideUp().remove() doesn't seem to show the slideUp animation before remove occurs
14
$('#ur_id').slideUp("slow", function() { $('#ur_id').remove();});
0
He modificado la respuesta de Greg para satisfacer mi caso, y funciona. Aquí está:
$("#note-items").children('.active').hide('slow', function(){ $("#note-items").children('.active').remove(); });
1
Todas las respuestas son buenas, pero encontré que todas carecían de ese "pulido" profesional. Se me ocurrió esto, el desvanecimiento, deslizándose hacia arriba, a continuación, quitar:
$target.fadeTo(1000, 0.01, function(){
$(this).slideUp(150, function() {
$(this).remove();
});
});
0
soy poco tarde a la fiesta, pero para alguien como yo que venía de una búsqueda en Google y no encontró la respuesta correcta . No me malinterpreten hay buenas respuestas aquí, pero no es exactamente lo que estaba buscando, sin más preámbulos, aquí es lo que hice:
$(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>Cuestiones relacionadas
- 1. cómo eliminar el elemento creado con jquery?
- 2. ¿Cómo eliminar un elemento del objeto jQuery?
- 3. ¿Cómo eliminar el contenido de un elemento con JQuery?
- 4. ¿Cómo eliminar texto dentro de un elemento con jQuery?
- 5. jQuery Eliminar texto específico de un elemento
- 6. jQuery - Eliminar todo después de un elemento
- 7. jquery eliminar elemento hijo directo
- 8. ¿Cómo agrego un elemento DOM con jQuery?
- 9. Eliminar elemento del objeto jQuery
- 10. jQuery Eliminar plugin del elemento
- 11. jQuery atributo css cambio lentamente
- 12. jQuery jCarousel - cómo eliminar el jCarousel de un elemento
- 13. Cómo destruir un elemento DOM con jQuery?
- 14. ¿Cómo eliminar "href" con Jquery?
- 15. Cómo eliminar un elemento de un IGrouping
- 16. Cómo eliminar un elemento de un conjunto?
- 17. Jquery ordenable, eliminar elemento actual arrastrando
- 18. JQuery eliminar elemento DOM después de desvanecer
- 19. ¿Cómo eliminar un autocompletar una vez agregado a un elemento?
- 20. Eliminar último elemento de datos anexados jQuery
- 21. ¿Cómo eliminar el primer elemento secundario de un elemento al que hace referencia $ (esto) en Jquery?
- 22. emacs lisp: ¿Cómo eliminar/eliminar un elemento de una lista?
- 23. ¿Cómo eliminar el último elemento de una selección jQuery?
- 24. Cómo eliminar el elemento dom del objeto jquery
- 25. ¿Cómo puedo convertir un elemento DOM en un elemento jQuery?
- 26. ¿Cómo eliminar elemento de un objeto JavaScript
- 27. ¿Cómo eliminar un elemento xml del archivo?
- 28. Elemento emergente con JQuery
- 29. Extendiendo un elemento DOM con jQuery
- 30. Como eliminar el elemento dom
El .Remove() muy específicamente elimina el nodo del DOM. El método .hide() solo cambia el atributo de visualización para que make no sea visible, pero aún exista. – micahwittman
$ (this) .remove() funciona mejor. – Envil
@Envil El cartel preguntó cómo eliminarlo lentamente. .remove() lo hace de inmediato. – pixelearth