Unterschiede zwischen remove (), hide () und remove () - jQuery

Was ist der funktionale Unterschied zwischen diesen drei jQueryMethoden:

• ablösen()
• ausblenden()
• entfernen()

hide()Setzt die CSS- displayEigenschaft der übereinstimmenden Elemente auf none.

remove() Entfernt die übereinstimmenden Elemente vollständig aus dem DOM.

detach()ist wie remove(), behält aber die gespeicherten Daten und Ereignisse bei, die den übereinstimmenden Elementen zugeordnet sind.

Um ein getrenntes Element erneut in das DOM einzufügen, fügen Sie einfach den zurückgegebenen jQuerySatz ein von detach():

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

...

span.appendTo('body');

Stellen Sie sich ein Stück Papier auf einem Tisch vor, auf dem einige Notizen mit Bleistift geschrieben sind.

• hide -> werfen Sie eine Kleidung darauf
• empty -> Entfernen Sie die Notizen mit einem Radiergummi
• detach -> Nehmen Sie das Papier in die Hand und bewahren Sie es für zukünftige Pläne auf
• remove -> nimm das Papier und wirf es in den Mülleimer

Das Papier repräsentiert das Element und die Notizen repräsentieren den Inhalt (untergeordnete Knoten) des Elements.

Ein bisschen vereinfacht und nicht ganz genau, aber leicht zu verstehen.

hide() setzt die Anzeige des übereinstimmenden Elements auf keine.

detach() Entfernt die übereinstimmenden Elemente, einschließlich aller Text- und untergeordneten Knoten.

Diese Methode speichert alle dem Element zugeordneten Daten und kann daher zum Wiederherstellen der Daten des Elements sowie von Ereignishandlern verwendet werden.

remove() Entfernt auch die übereinstimmenden Elemente, einschließlich aller Text- und untergeordneten Knoten.

In diesem Fall können jedoch nur die Daten des Elements wiederhergestellt werden, nicht die Ereignishandler.

In jQuery gibt es drei Methoden zum Entfernen von Elementen aus dem DOM. Diese drei Methoden sind .empty(), .remove()und .detach(). Alle diese Methoden werden zum Entfernen von Elementen aus dem DOM verwendet, sind jedoch alle unterschiedlich.

.ausblenden()

Blenden Sie die übereinstimmenden Elemente aus. Ohne Parameter ist die .hide () -Methode der einfachste Weg, ein HTML-Element auszublenden:

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

.leer()

Die Methode .empty () entfernt alle untergeordneten Knoten und Inhalte aus den ausgewählten Elementen. Diese Methode entfernt weder das Element selbst noch seine Attribute.

Hinweis

Die Methode .empty () akzeptiert keine Argumente, um Speicherverluste zu vermeiden. jQuery entfernt andere Konstrukte wie Daten- und Ereignishandler aus den untergeordneten Elementen, bevor die Elemente selbst entfernt werden.

Beispiel

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

Dies führt zu einer DOM-Struktur, in der der Hai-Text gelöscht wird:

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

Wenn wir eine beliebige Anzahl verschachtelter Elemente hätten <div class="hai">, würden diese ebenfalls entfernt.

.entfernen()

Die Methode .remove () entfernt die ausgewählten Elemente, einschließlich aller Text- und untergeordneten Knoten. Diese Methode entfernt auch die Daten und Ereignisse der ausgewählten Elemente.

Hinweis

Verwenden Sie .remove (), wenn Sie das Element selbst sowie alles darin entfernen möchten. Darüber hinaus werden alle gebundenen Ereignisse und jQuery-Daten, die den Elementen zugeordnet sind, entfernt.

BEISPIEL

Betrachten Sie das folgende HTML:

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

Dies führt zu einer DOM-Struktur mit dem <div>gelöschten Element:

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

Wenn wir eine beliebige Anzahl verschachtelter Elemente hätten <div class="hai">, würden diese ebenfalls entfernt. Andere jQuery-Konstrukte wie Daten- oder Ereignishandler werden ebenfalls gelöscht.

.ablösen()

Die Methode .detach () entfernt die ausgewählten Elemente, einschließlich aller Text- und untergeordneten Knoten. Es werden jedoch Daten und Ereignisse gespeichert. Diese Methode speichert auch eine Kopie der entfernten Elemente, sodass sie zu einem späteren Zeitpunkt wieder eingefügt werden können.

Hinweis

Die Methode .detach () ist nützlich, wenn entfernte Elemente zu einem späteren Zeitpunkt wieder in das DOM eingefügt werden sollen.

Beispiel

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

Weitere Informationen finden Sie unter: 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>