Las diferencias entre detach(), ocultar() y remove() - jQuery

136

hide() establece CSS los elementos coincidentes display propiedad a none.

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

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

Para volver a insertar un elemento independiente en el DOM, sólo tiene que insertar el conjunto devuelto jQuery de detach():

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

... 

span.appendTo('body');

Fuente

2011-02-09 06:51:54

+7

Combinado con .clone (verdadero), puede usar detach para plantillas baratas que evitan eventos en vivo de jquery: http://jsfiddle.net/b9chris/PNd2t/ –

+0

Todavía no veo la diferencia. Si utilizo 'remove' en lugar de' detach', el ejemplo sigue funcionando. – comecme

+10

@comecme: si ha vinculado un evento como un manejador de clics al tramo, llame a 'remove()' y vuelva a adjuntarlo, el enlace se habrá ido y haciendo clic en el tramo no hará nada. Si llama a 'detach()' y vuelve a conectar, el enlace permanece y el manejador de clics sigue funcionando. – jpatokal

12

hide() conjuntos de visualización del elemento emparejado a 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 así puede usarse para restaurar los datos del elemento así como los manejadores de eventos.

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

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

Fuente

2012-09-21 13:26:58 Kumar

11

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.

.hide()

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

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

.empty()

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

Nota

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

Ejemplo

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

Esto resultará en una estructura de DOM con el texto Hai eliminado:

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

Si teníamos cualquier número de elementos anidados dentro de <div class="hai">, que sería eliminado demasiado .

.Remove()

El método .Remove() elimina los elementos seleccionados, incluyendo todos los nodos de texto y del niño. Este método también elimina los datos y eventos de los elementos seleccionados.

Nota

Uso .Remove() cuando se desea eliminar el elemento en sí, así como todo dentro de él. Además de esto, se eliminan todos los eventos enlazados y los datos de jQuery asociados con los elementos.

Ejemplo

Considérese el siguiente html:

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

Esto resultará en una estructura de DOM con el elemento de <div> eliminado:

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

Si teníamos cualquier número de anidada elementos dentro de <div class="hai">, se eliminarán también. También se borran otras construcciones de jQuery, como los manejadores de datos o eventos.

.detach()

El método .detach() elimina los elementos seleccionados, incluyendo todos los nodos de texto y del niño. Sin embargo, guarda datos y eventos. Este método también conserva una copia de los elementos eliminados, lo que les permite reinsertarse en otro momento.

Nota método

El .detach() es útil cuando los elementos extraídos han de ser reinsertado 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

Fuente

2014-03-28 11:27:30 Jason

32

imaginar un trozo de papel sobre una mesa con algunas notas escritas con lápiz.

hide -> lanzar un vestir sobre ella
empty -> eliminar las notas con una goma de borrar
detach -> agarrar el papel en la mano y mantenerlo allí por cualquier planes futuros
remove -> agarrar el papel y tirarlo al cubo de basura

El papel representa el elemento, y las notas representan los contenidos (nodos secundarios) de el elemento.

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

Fuente

2015-12-11 08:08:27

0

<!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>

Fuente

2016-05-12 04:23:00

Las diferencias entre detach(), ocultar() y remove() - jQuery

Respuesta

Cuestiones relacionadas