Differenze tra detach(), nascondere() e rimuovere() - jQuery

136

hide() imposta CSS gli elementi abbinati display proprietà none.

remove() rimuove completamente gli elementi corrispondenti dal DOM.

detach() è come remove(), ma mantiene i dati memorizzati e gli eventi associati agli elementi corrispondenti.

reinserire un elemento indipendente nel DOM, è sufficiente inserire il restituito jQuery set da detach():

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

... 

span.appendTo('body');

fonte

2011-02-09 06:51:54

+7

In combinazione con .clone (vero), è possibile utilizzare il distacco per il templating a basso costo che evita gli eventi live jquery: http://jsfiddle.net/b9chris/PNd2t/ –

+0

Non vedo ancora la differenza. Se uso 'remove' invece di' detach', l'esempio funziona ancora. – comecme

+10

@comecme: se hai associato un evento come un gestore di clic allo span, chiama 'remove()', e allegalo di nuovo, l'associazione sparirà e facendo clic sullo span non farai nulla. Se chiami 'detach()' e ricolleghi, il binding rimane e il gestore di clic continua a funzionare. – jpatokal

12

hide() imposta visualizzazione dell'elemento abbinato a nessuno.

detach() rimuove gli elementi corrispondenti, inclusi tutto il testo e i nodi figlio.

Questo metodo memorizza tutti i dati associati all'elemento e può quindi essere utilizzato per ripristinare i dati dell'elemento nonché i gestori di eventi.

remove() rimuove anche gli elementi corrispondenti, inclusi tutto il testo e i nodi figlio.

Tuttavia, in questo caso, solo i dati dell'elemento possono essere ripristinati, non i suoi gestori di eventi non possono.

fonte

2012-09-21 13:26:58 Kumar

11

In jQuery, ci sono tre metodi per rimuovere elementi dal DOM. Questi tre metodi sono .empty(), .remove() e .detach(). Tutti questi metodi sono usati per rimuovere elementi dal DOM, ma sono tutti diversi.

.nascosto()

nascondere gli elementi corrispondenti. Senza parametri, il metodo .nascosto() è il modo più semplice per nascondere un elemento HTML:

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

.empty()

Il metodo .empty() rimuove tutti i nodi figli e contenuti da gli elementi selezionati. Questo metodo non rimuove l'elemento stesso o i suoi attributi. Metodo

Nota

Il .empty() non accetta alcun argomento per evitare perdite di memoria. jQuery rimuove altri costrutti, come dati e gestori di eventi, dagli elementi figli prima di rimuovere gli elementi stessi.

Esempio

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

Questo si tradurrà in una struttura DOM con il testo Hai eliminato:

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

Se avessimo un numero qualsiasi di elementi annidati all'interno <div class="hai">, sarebbero stati rimossi troppo .

.Rimuovere()

Il metodo .Rimuovere() rimuove gli elementi selezionati, tra cui tutti i nodi di testo e figlio. Questo metodo rimuove anche i dati e gli eventi degli elementi selezionati.

Nota

Usa .Rimuovere() quando si desidera rimuovere l'elemento stesso, così come tutto al suo interno. Inoltre, tutti gli eventi associati e i dati jQuery associati agli elementi vengono rimossi.

ESEMPIO

Si consideri il seguente codice HTML:

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

Questo si tradurrà in una struttura DOM con l'elemento <div> cancellato:

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

Se avessimo un numero illimitato di annidati elementi all'interno di <div class="hai">, sarebbero stati rimossi. Anche altri costrutti jQuery, come dati o gestori di eventi, vengono cancellati.

.detach()

Il metodo .detach() rimuove gli elementi selezionati, tra cui tutti i nodi di testo e figlio. Tuttavia, conserva dati ed eventi. Questo metodo mantiene anche una copia degli elementi rimossi, che consente loro di essere reinseriti in un secondo momento.

Nota metodo

Il .detach() è utile quando gli elementi rimossi devono essere reinserito nel DOM in un secondo momento.

Esempio

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

Per maggiori informazioni, visitare: http://www.scriptcafe.in/2014/03/what-is-difference-between-jquery_15.html

fonte

2014-03-28 11:27:30 Jason

32

Immaginate un pezzo di carta su un tavolo con alcune note scritte con la matita.

hide -> gettare un vestire su di esso
empty -> rimuovere le note con una gomma
detach -> afferrare la carta in mano e tenerlo lì per qualsiasi piani futuri
remove -> prendi la carta e gettala nella pattumiera

Il foglio rappresenta l'elemento e le note rappresentano il contenuto (nodi figlio) di l'elemento.

Un po 'semplificato e non completamente preciso, ma facile da capire.

fonte

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>

fonte

2016-05-12 04:23:00

Differenze tra detach(), nascondere() e rimuovere() - jQuery

risposta

Problemi correlati