Diferencias entre detach (), hide () y remove () - jQuery

¿Cuál es la diferencia funcional entre estos tres jQuerymétodos?

• despegar()
• esconder()
• eliminar()

hide()establece la displaypropiedad CSS de los elementos coincidentes en none.

remove() elimina los elementos coincidentes del DOM por completo.

detach()es similar remove(), pero mantiene los datos almacenados y los eventos asociados con los elementos coincidentes.

Para volver a insertar un elemento separado en el DOM, simplemente inserte el jQueryconjunto devuelto de detach():

var span = $('span').detach();

...

span.appendTo('body');

Imagina una hoja de papel sobre una mesa con unas notas escritas con lápiz.

• hide -> arrojarle una ropa
• empty -> eliminar las notas con un borrador
• detach -> agarre el papel en su mano y guárdelo allí para cualquier plan futuro
• remove -> agarra el papel y tíralo a la basura

El papel representa el elemento y las notas representan el contenido (nodos secundarios) del elemento.

Un poco simplificado y no completamente exacto, pero fácil de entender.

hide() establece la visualización del elemento coincidente en ninguno.

detach() elimina los elementos coincidentes, incluidos todos los nodos de texto y secundarios.

Este método almacena todos los datos asociados con el elemento y, por lo tanto, se puede utilizar para restaurar los datos del elemento y los controladores de eventos.

remove() también elimina los elementos coincidentes, incluidos todo el texto y los nodos secundarios.

Sin embargo, en este caso, solo se pueden restaurar los datos del elemento, no sus controladores de eventos.

En jQuery, hay tres métodos para eliminar elementos del DOM. Estos tres métodos son .empty(), .remove(), y .detach(). Todos estos métodos se utilizan para eliminar elementos del DOM, pero todos son diferentes.

.esconder()

Ocultar los elementos coincidentes. Sin parámetros, el método .hide () es la forma más sencilla de ocultar un elemento HTML:

$(".box").hide();

.vacío()

El método .empty () elimina todos los nodos secundarios y el contenido de los elementos seleccionados. Este método no elimina el elemento en sí ni sus atributos.

Nota

El método .empty () no acepta ningún argumento para evitar pérdidas de memoria. jQuery elimina otras construcciones, como controladores de eventos y datos, de los elementos secundarios antes de eliminar los elementos en sí.

Ejemplo

<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
    $("div.hai").empty();
</script>

Esto dará como resultado una estructura DOM con el texto Hai eliminado:

<div class="content">
<div class="hai"></div>
<div class="goodevening">good evening</div>
</div>

Si tuviéramos cualquier cantidad de elementos anidados adentro <div class="hai">, también se eliminarían.

.eliminar()

El método .remove () elimina los elementos seleccionados, incluidos todo el texto y los nodos secundarios. Este método también elimina los datos y eventos de los elementos seleccionados.

Nota

Utilice .remove () cuando desee eliminar el elemento en sí, así como todo lo que contiene. Además de esto, se eliminan todos los eventos vinculados y los datos de jQuery asociados con los elementos.

EJEMPLO

Considere el siguiente html:

<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
    $("div.hai").remove();
</script>

Esto dará como resultado una estructura DOM con el <div>elemento eliminado:

<div class="content">
<div class="goodevening">good evening</div>
</div

Si tuviéramos cualquier cantidad de elementos anidados dentro <div class="hai"> , también se eliminarían. También se borran otras construcciones de jQuery, como los controladores de eventos o datos.

.despegar()

El método .detach () elimina los elementos seleccionados, incluidos todo el texto y los nodos secundarios. Sin embargo, conserva datos y eventos. Este método también guarda una copia de los elementos eliminados, lo que permite volver a insertarlos en un momento posterior.

Nota

El método .detach () es útil cuando los elementos eliminados deben reinsertarse en el DOM en un momento posterior.

Ejemplo

<!doctype html>
<html>
<head>

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hai!</p>Good <p>Afternoo</p>
<button>Attach/detach paragraphs</button>
<script>
$( "p" ).click(function() {
$( this ).toggleClass( "off" );
});
var p;
$( "button" ).click(function() {
if ( p ) {
p.appendTo( "body" );
p = null;
} else {
p = $( "p" ).detach();
}
});
</script>
</body>
</html>

Para obtener más información, visite: http://www.scriptcafe.in/2014/03/what-is-difference-between-jquery_15.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function(){
            var $span;
            $span = $("<span>");
            $span.text("Ngoc Xuan");
            function addEvent() {
                $span.on("click",function(){
                    alert("I'm Span");
                });
            }
            function addSpan() {

                $span.appendTo("body");
            }
           function addButton(name) {
               var $btn = $("<input>");
               $btn.attr({value:name,
                       type:'submit'});
               if(name=="remove"){
                   $btn.on("click",function(){
                       $("body").find("span").remove();
                   })
               }else if(name=="detach"){
                   $btn.on("click",function(){
                       $("body").find("span").detach();
                   })
               }else if(name=="Add") {
                   $btn.on("click",function(){
                       addSpan();
                   })
               }else if(name=="Event"){
                   $btn.on("click",function(){
                       addEvent();
                   })
               }else if (name == "Hide") {
                   $btn.on("click",function(){
                       if($span.text()!= '')
                           $span.hide();
                   })
               }else {
                   $btn.on("click",function(){
                       $span.show();
                   })
               }
               $btn.appendTo("body");
           }
            (function () {
                addButton("remove");
                addButton("detach");
                addButton("Add");
                addButton("Event");
                addButton("Hide");
                addButton("Show");
            })();
        });
    </script>
</body>
</html>