Antes de ver las diferencias entre estos dos métodos de jQuery, comprendamos primero los métodos.
remove() : este método remove() elimina los elementos coincidentes del DOM. Cuando aplicamos el método remove() a cualquier elemento, todo lo que esté dentro de ese elemento y el elemento mismo se eliminarán del DOM. Se eliminarán todos los elementos anidados, controladores de eventos o cualquier tipo de datos presentes dentro de ese elemento.
Sintaxis:
$('selector').remove();
Ejemplo:
HTML
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<div class="test">
<p>Hello Geeks!</p>
<p>Hey Hello</p>
</div>
<button>Click here to remove above element</button>
<script>
// Removing class test from DOM
$("button").click(function () {
$(".test").remove();
})
</script>
</body>
</html>
Producción:
método de eliminación
detach(): El método detach() es casi el mismo que el método remove() anterior . La única diferencia es que el método detach() mantiene todos los datos asociados con ese elemento eliminado. Y todos nuestros datos se mantienen seguros, por lo que podemos reinsertarlos en DOM cuando queramos.
Este método se usa básicamente cuando queremos eliminar cualquier elemento pero no queremos eliminarlo por completo para poder volver a insertar ese elemento eliminado más tarde.
Sintaxis:
$(selector).detach()
Ejemplo: primero eliminaremos un elemento del DOM y luego intentaremos reinsertar ese elemento eliminado en el DOM.
HTML
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<button id="detach">Detach h3 tag</button>
<button id="attach">Attach to DOM</button>
<script>
// A variable to store the data
// of removed element
let rem;
// Removing h3 tag first
// on clicking detach button
$("#detach").click(function () {
rem = $("h2").detach();
})
// Reinserting h2 tag
// on clicking attach button
$("#attach").click(function(){
rem.appendTo("body");
})
</script>
</body>
</html>
Producción:
Separar y adjuntar
Diferencia entre .remove() y .detach():
| retirar() | despegar() |
|---|---|
| Elimina el elemento coincidente del DOM. | También elimina el elemento coincidente del DOM. |
|
No guarda los datos de los elementos eliminados. Por ejemplo, se eliminarán todos los elementos secundarios, los controladores de eventos y cualquier tipo de datos presentes dentro del elemento. |
Guarda los datos de los elementos separados. Todo lo presente dentro del elemento separado se mantiene seguro. |
| No es posible volver a insertar el elemento eliminado en el DOM. | Podemos reinsertar fácilmente elementos en el DOM cuando queramos. |