La différence entre vide et supprimer lors de la suppression d'un nœud DOM-js tutoriel-php.cn

La différence entre vide et supprimer lors de la suppression d'un nœud DOM

一个新手

Libérer： 2017-09-29 10:04:01

original

1958 Les gens l'ont consulté

La suppression de nœuds sur la page est une opération courante pour les développeurs. jQuery propose plusieurs méthodes différentes pour résoudre ce problème. Nous examinons ici de plus près les méthodes vides et de suppression

vide, comme son nom l'indique. , efface la méthode, mais elle est un peu différente de delete, car elle supprime uniquement tous les nœuds enfants de l'élément spécifié.

Cette méthode supprime non seulement les éléments enfants (et autres éléments descendants), mais supprime également le texte à l'intérieur de l'élément. Parce que, selon les instructions, toute chaîne de texte dans l'élément est considérée comme un nœud enfant de l'élément. Veuillez regarder le code HTML suivant :

<p class="hello"><p>这是p标签</p></p>

Copier après la connexion

Si nous supprimons tous les éléments à l'intérieur de p via une méthode vide, cela efface simplement le code HTML interne, mais le balisage reste dans le DOM,

//通过empty处理
$(&#39;.hello&#39;).empty()
//结果：<p>这是p标签</p>被移除<p class="hello"></p>

Copier après la connexion

通过empty移除了当前p元素下的所有p元素，但是本身id=test的p元素没有被删除

Copier après la connexion

<!DOCTYPE html><html><head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    p {
        background: #bbffaa;
        width: 300px;
    }
    </style></head><body>
    <h2>通过empty移除元素</h2>
    <p id="test">
        <p>p元素1</p>
        <p>p元素2</p>
    </p>
    <button>点击通过jQuery的empty移除元素</button>
    <script type="text/javascript">
    $("button").on(&#39;click&#39;, function() {        //通过empty移除了当前p元素下的所有p元素
        //但是本身id=test的p元素没有被删除        $("#test").empty()
    })    </script></body></html>

Copier après la connexion

remove est identique à vide, les deux méthodes sont utilisées pour supprimer des éléments , mais supprimer Cela supprimera l'élément lui-même, ainsi que tout ce qu'il contient, y compris les événements liés et les données jQuery liées à l'élément.

Par exemple, pour un nœud, lier un événement clic

<p class="hello"><p>这是P段落</p></p>$(&#39;.hello&#39;).on("click",fn)

Copier après la connexion

Il est en fait très simple de supprimer ce nœud sans utiliser la méthode Remove, mais en même temps, l'événement doit être détruit, c'est pour éviter les "fuites de mémoire", donc les développeurs front-end doivent faire attention au nombre d'événements qui sont liés, et n'oubliez pas de le détruire lorsqu'il n'est pas utilisé

Supprimez p et tous ses éléments internes via la méthode Remove , Remove fera automatiquement fonctionner la méthode de destruction d'événement en interne, elle est donc très simple à utiliser

//通过remove处理
$(&#39;.hello&#39;).remove()
//结果：<p class="hello"><p>这是P段落</p></p> 全部被移除 //节点不存在了,同事事件也会被销毁

Copier après la connexion

remove paramètres d'expression :

remove est plus facile à utiliser que vide Où vous pouvez passer une expression de sélection pour filtrer l'ensemble des éléments correspondants qui seront supprimés, et vous pouvez supprimer sélectivement le nœud spécifié

Nous pouvez sélectionner un groupe des mêmes éléments via $(), puis transmettre les règles de filtrage via Remove(), afin de traiter

<!DOCTYPE html><html><head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .test1 {
        background: #bbffaa;
    }
    
    .test2 {
        background: yellow;
    }
    </style></head><body>
    <h2>通过jQuery remove方法移除元素</h2>
    <p class="test1">
        <p>p元素1</p>
        <p>p元素2</p>
    </p>
    <p class="test2">
        <p>p元素3</p>
        <p>p元素4</p>
    </p>
    <button>通过点击jQuery的empty移除元素</button>
    <button>通过点击jQuery的empty移除指定元素</button>
    <script type="text/javascript">
    $("button:first").on(&#39;click&#39;, function() {        //删除整个 class=test1的p节点        $(".test1").remove()
    })

    $("button:last").on(&#39;click&#39;, function() {        //找到所有p元素中，包含了3的元素
        //这个也是一个过滤器的处理        $("p").remove(":contains(&#39;3&#39;)")
    })    </script></body></html>

Copier après la connexion

Quand vous le souhaitez. pour supprimer des éléments spécifiés, jQuery fournit deux méthodes empty() et remove([ expr]), qui suppriment toutes deux des éléments, mais il existe encore des différences entre les deux :

Lorsque vous souhaitez supprimer un élément spécifié, jQuery fournit vide() et supprimer([expr]) Deux méthodes, les deux suppriment des éléments, mais il existe encore des différences entre les deux

méthode vide

À proprement parler, la méthode empty() ne supprime pas les nœuds. Au lieu de cela, elle efface le nœud, ce qui peut effacer tous les nœuds descendants de l'élément
empty ne peut pas supprimer son propre nœud

Méthode de suppression

Le nœud et tous les nœuds descendants contenus dans le nœud seront supprimés en même temps
Fournit passer une expression de filtre pour supprimer des éléments de la collection spécifiée

Ce qui précède est la différence entre les deux. Approfondissons notre compréhension à travers la partie de code à droite

<.>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

La différence entre vide et supprimer lors de la suppression d'un nœud DOM