Différences entre detach (), hide () et remove () - jQuery

Quelle est la différence fonctionnelle entre ces trois jQueryméthodes:

• détacher()
• cacher()
• retirer()

hide()définit la displaypropriété CSS des éléments correspondants sur none.

remove() supprime complètement les éléments correspondants du DOM.

detach()est similaire remove(), mais conserve les données stockées et les événements associés aux éléments correspondants.

Pour réinsérer un élément détaché dans le DOM, insérez simplement l' jQueryensemble retourné à partir de detach():

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

...

span.appendTo('body');

Imaginez un morceau de papier sur une table avec des notes écrites au crayon.

• hide -> jeter un vêtement dessus
• empty -> supprimer les notes avec une gomme
• detach -> prenez le papier dans votre main et gardez-le là pour vos projets futurs
• remove -> attrapez le papier et jetez-le à la poubelle

Le papier représente l'élément et les notes représentent le contenu (nœuds enfants) de l'élément.

Un peu simplifié et pas complètement précis, mais facile à comprendre.

hide() définit l'affichage de l'élément correspondant sur aucun.

detach() supprime les éléments correspondants, y compris tout le texte et les nœuds enfants.

Cette méthode stocke toutes les données associées à l'élément et peut donc être utilisée pour restaurer les données de l'élément ainsi que les gestionnaires d'événements.

remove() supprime également les éléments correspondants, y compris tout le texte et les nœuds enfants.

Cependant, dans ce cas, seules les données de l'élément peuvent être restaurées, pas ses gestionnaires d'événements.

Dans jQuery, il existe trois méthodes pour supprimer des éléments du DOM. Ces trois méthodes sont .empty(), .remove()et .detach(). Toutes ces méthodes sont utilisées pour supprimer des éléments du DOM, mais elles sont toutes différentes.

.cacher()

Masquez les éléments correspondants. Sans paramètre, la méthode .hide () est le moyen le plus simple de masquer un élément HTML:

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

.vide()

La méthode .empty () supprime tous les nœuds enfants et le contenu des éléments sélectionnés. Cette méthode ne supprime pas l'élément lui-même, ni ses attributs.

Remarque

La méthode .empty () n'accepte aucun argument pour éviter les fuites de mémoire. jQuery supprime les autres constructions, telles que les gestionnaires de données et d'événements, des éléments enfants avant de supprimer les éléments eux-mêmes.

Exemple

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

Cela entraînera une structure DOM avec le texte Hai supprimé:

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

Si nous avions un certain nombre d'éléments imbriqués à l'intérieur <div class="hai">, ils seraient également supprimés.

.retirer()

La méthode .remove () supprime les éléments sélectionnés, y compris tout le texte et les nœuds enfants. Cette méthode supprime également les données et les événements des éléments sélectionnés.

Remarque

Utilisez .remove () lorsque vous souhaitez supprimer l'élément lui-même, ainsi que tout ce qu'il contient. En plus de cela, tous les événements liés et les données jQuery associés aux éléments sont supprimés.

EXEMPLE

Considérez le html suivant:

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

Cela se traduira par une structure DOM avec l' <div>élément supprimé:

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

Si nous avions un certain nombre d'éléments imbriqués à l'intérieur <div class="hai">, ils seraient également supprimés. D'autres constructions jQuery, telles que les gestionnaires de données ou d'événements, sont également effacées.

.détacher()

La méthode .detach () supprime les éléments sélectionnés, y compris tout le texte et les nœuds enfants. Cependant, il conserve les données et les événements. Cette méthode conserve également une copie des éléments supprimés, ce qui leur permet d'être réinsérés ultérieurement.

Remarque

La méthode .detach () est utile lorsque des éléments supprimés doivent être réinsérés ultérieurement dans le DOM.

Exemple

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

Pour plus d'informations, visitez: 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>