Diferenças entre detach (), hide () e remove () - jQuery

Respostas:

151

hide()define a displaypropriedade CSS dos elementos correspondentes como none.

remove() remove os elementos correspondentes do DOM completamente.

detach()é semelhante remove(), mas mantém os dados armazenados e eventos associados aos elementos correspondentes.

Para inserir novamente um elemento separado no DOM, basta inserir o jQueryconjunto retornado de detach():

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

...

span.appendTo('body');
Jacob Relkin
fonte
7
Combinado com .clone (true), você pode usar detach para modelos baratos que evitam eventos ao vivo do jquery: jsfiddle.net/b9chris/PNd2t
Chris Moschini
Ainda não vejo diferença. Se eu usar removeno lugar de detach, o exemplo ainda funcionará.
comecme
12
@comecme: Se você vinculou um evento como um manipulador de clique ao intervalo, chame remove()e anexe-o novamente, o vínculo será removido e clicar no intervalo não fará nada. Se você chamar detach()e reconectar, a ligação permanece e o manipulador de clique continua funcionando.
lambshaanxy
A resposta de @ Kumar é um pouco mais correta em relação a remove (), já que não é removido do DOM. Isso tem repercussões, pois elementos complexos com eventos associados tendem a consumir muita memória do navegador se não forem mastigados pelo coletor de lixo rápido o suficiente. Um truque para liberar memória mais rápido é $ (element) .html (''). Remove ();
oskarth
hide () define a propriedade de exibição CSS dos elementos correspondentes como nenhum. Significa: Você pode me descrever a diferença entre hide () e display: none.
Krish
50

Imagine um pedaço de papel sobre uma mesa com algumas notas escritas a lápis.

  • hide -> jogue uma roupa nele
  • empty -> remova as notas com uma borracha
  • detach -> pegue o papel em sua mão e mantenha-o lá para quaisquer planos futuros
  • remove -> pegue o papel e jogue-o na lixeira

O papel representa o elemento e as notas representam o conteúdo (nós filhos) do elemento.

Um pouco simplificado e não totalmente preciso, mas fácil de entender.

Zoltán Tamási
fonte
14

hide() define a exibição do elemento correspondente como nenhum.

detach() remove os elementos correspondentes, incluindo todos os nós de texto e filhos.

Este método armazena todos os dados associados ao elemento e, portanto, pode ser usado para restaurar os dados do elemento, bem como manipuladores de eventos.

remove() também remove os elementos correspondentes, incluindo todos os nós de texto e filhos.

No entanto, neste caso, apenas os dados do elemento podem ser restaurados, não seus manipuladores de eventos.

Kumar
fonte
11

Em jQuery, existem três métodos para remover elementos do DOM. Estes três métodos são .empty(), .remove()e .detach(). Todos esses métodos são usados ​​para remover elementos do DOM, mas todos são diferentes.

.ocultar()

Oculte os elementos correspondentes. Sem parâmetros, o método .hide () é a maneira mais simples de ocultar um elemento HTML:

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

.vazio()

O método .empty () remove todos os nós filhos e conteúdo dos elementos selecionados. Este método não remove o próprio elemento ou seus atributos.

Nota

O método .empty () não aceita nenhum argumento para evitar vazamentos de memória. jQuery remove outras construções, como manipuladores de dados e eventos, dos elementos filhos antes de remover os próprios elementos.

Exemplo 

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

Isso resultará em uma estrutura DOM com o texto Hai excluído:

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

Se tivéssemos qualquer número de elementos aninhados dentro <div class="hai">, eles também seriam removidos.

.remover()

O método .remove () remove os elementos selecionados, incluindo todo o texto e nós filhos. Este método também remove os dados e eventos dos elementos selecionados.

Nota

Use .remove () quando quiser remover o próprio elemento, bem como tudo dentro dele. Além disso, todos os eventos vinculados e dados jQuery associados aos elementos são removidos.

EXEMPLO

Considere o seguinte html:

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

Isso resultará em uma estrutura DOM com o <div>elemento excluído:

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

Se tivéssemos qualquer número de elementos aninhados dentro <div class="hai">, eles também seriam removidos. Outras construções jQuery, como manipuladores de dados ou eventos, também são apagadas.

.detach ()

O método .detach () remove os elementos selecionados, incluindo todo o texto e nós filhos. No entanto, ele mantém dados e eventos. Este método também mantém uma cópia dos elementos removidos, o que permite que eles sejam reinseridos posteriormente.

Nota

O método .detach () é útil quando os elementos removidos devem ser reinseridos no DOM posteriormente.

Exemplo

<!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 obter mais informações, visite: http://www.scriptcafe.in/2014/03/what-is-difference-between-jquery_15.html

Jason
fonte
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>
Xuân Nguyễn
fonte