Różnice między detach (), hide () i remove () - jQuery

Odpowiedzi:

151

hide()ustawia displaywłaściwość CSS dopasowanych elementów na none.

remove() całkowicie usuwa dopasowane elementy z DOM.

detach()jest podobny remove(), ale zachowuje przechowywane dane i zdarzenia związane z dopasowanymi elementami.

Aby ponownie wstawić odłączony element do DOM, po prostu wstaw zwrócony jQueryzestaw z detach():

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

...

span.appendTo('body');
Jacob Relkin
źródło
7
W połączeniu z .clone (true) możesz użyć detach do taniego tworzenia szablonów, które pozwala uniknąć wydarzeń na żywo w jquery: jsfiddle.net/b9chris/PNd2t
Chris Moschini
Nadal nie widzę różnicy. Jeśli removezamiast tego użyję detach, przykład nadal działa.
comecme
12
@comecme: Jeśli powiązałeś zdarzenie, takie jak moduł obsługi kliknięcia, z zakresem, wywołaj remove()i dołącz je ponownie, powiązanie zniknie, a kliknięcie zakresu nic nie da. Jeśli zadzwonisz detach()i ponownie podłączysz, powiązanie pozostanie, a moduł obsługi kliknięcia nadal działa.
lambshaanxy
Odpowiedź @ Kumara jest nieco bardziej poprawna w odniesieniu do remove (), ponieważ nie jest ona usuwana z DOM. Ma to konsekwencje, ponieważ złożone elementy z powiązanymi zdarzeniami zwykle pochłaniają dużo pamięci przeglądarki, jeśli nie są wystarczająco szybko przeżuwane przez moduł odśmiecania. Sztuczka pozwalająca szybciej zwolnić pamięć to $ (element) .html (''). Remove ();
oskarth
hide () ustawia właściwość wyświetlania CSS dopasowanych elementów na none. To znaczy: Czy możesz mi opisać różnicę między hide () a display: none.
Krish
50

Wyobraź sobie kartkę papieru na stole z notatkami zapisanymi ołówkiem.

  • hide -> rzuć na to ubranie
  • empty -> usuń notatki za pomocą gumki
  • detach -> chwyć papier do ręki i trzymaj go tam na przyszłość
  • remove -> chwyć papier i wyrzuć go do kosza

Papier przedstawia element, a notatki przedstawiają zawartość (węzły potomne) elementu.

Nieco uproszczone i nie do końca dokładne, ale łatwe do zrozumienia.

Zoltán Tamási
źródło
14

hide() ustawia wyświetlanie dopasowanego elementu na brak.

detach() usuwa dopasowane elementy, w tym cały tekst i węzły potomne.

Ta metoda przechowuje wszystkie dane skojarzone z elementem, dzięki czemu można jej użyć do przywrócenia danych elementu, a także programów obsługi zdarzeń.

remove() usuwa również dopasowane elementy, w tym cały tekst i węzły potomne.

Jednak w tym przypadku można przywrócić tylko dane elementu, a nie jego procedury obsługi zdarzeń.

Kumar
źródło
11

W jQuery istnieją trzy metody usuwania elementów z DOM. Te trzy metody są .empty(), .remove()i .detach(). Wszystkie te metody służą do usuwania elementów z DOM, ale wszystkie są różne.

.ukryć()

Ukryj dopasowane elementy. Bez parametrów metoda .hide () jest najprostszym sposobem ukrycia elementu HTML:

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

.pusty()

Metoda .empty () usuwa wszystkie węzły potomne i zawartość z wybranych elementów. Ta metoda nie usuwa samego elementu ani jego atrybutów.

Uwaga

Metoda .empty () nie przyjmuje żadnego argumentu, aby uniknąć wycieków pamięci. jQuery usuwa inne konstrukcje, takie jak programy obsługi danych i zdarzeń, z elementów podrzędnych przed usunięciem samych elementów.

Przykład 

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

Spowoduje to powstanie struktury DOM z usuniętym tekstem Hai:

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

Gdybyśmy mieli w środku dowolną liczbę zagnieżdżonych elementów <div class="hai">, one również zostałyby usunięte.

.usunąć()

Metoda .remove () usuwa wybrane elementy, w tym cały tekst i węzły potomne. Ta metoda usuwa również dane i zdarzenia z wybranych elementów.

Uwaga

Użyj .remove (), jeśli chcesz usunąć sam element, a także wszystko, co się w nim znajduje. Oprócz tego wszystkie powiązane zdarzenia i dane jQuery skojarzone z elementami są usuwane.

PRZYKŁAD

Rozważ następujący kod HTML:

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

Spowoduje to powstanie struktury DOM z <div>usuniętym elementem:

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

Gdybyśmy mieli w środku dowolną liczbę zagnieżdżonych elementów <div class="hai">, one również zostałyby usunięte. Inne konstrukcje jQuery, takie jak programy obsługi danych lub zdarzeń, również są usuwane.

.odłączyć()

Metoda .detach () usuwa wybrane elementy, w tym cały tekst i węzły potomne. Jednak zachowuje dane i zdarzenia. Ta metoda zachowuje również kopię usuniętych elementów, co pozwala na ich ponowne włożenie w późniejszym czasie.

Uwaga

Metoda .detach () jest przydatna, gdy usunięte elementy mają zostać ponownie wstawione do DOM w późniejszym czasie.

Przykład

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

Aby uzyskać więcej informacji, odwiedź: http://www.scriptcafe.in/2014/03/what-is-difference-between-jquery_15.html

Jason
źródło
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
źródło