Quelles sont les méthodes pour supprimer des nœuds dans jquery ?-js tutoriel-php.cn

Quelles sont les méthodes pour supprimer des nœuds dans jquery ?

伊谢尔伦

Libérer： 2017-06-17 13:33:47

original

1939 Les gens l'ont consulté

1 nœudSupprimer l'utilisation de base de empty() de

La suppression de nœuds sur la page est une opération courante pour les développeurs, jQuery Plusieurs méthodes différentes sont proposées pour résoudre ce problème. Nous examinons ici de plus près la méthode vide

empty Comme son nom l'indique, c'est une méthode vide, mais elle est un peu différente de la suppression car elle supprime uniquement l'élément spécifié tous les nœuds enfants dans .

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 la description, tout texte chaîne dans l'élément est considéré comme un nœud enfant de l'élément. Veuillez regarder le code HTML suivant :

<p class="hello"><p>php.cn</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 toujours dans le DOM

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

Copier après la connexion

Vous pouvez vous référer à la zone de code à droite :

Tous les éléments p sous l'élément p actuel sont supprimés via le vide Cependant, l'élément p avec id=test n'a pas été supprimé

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

2. Utilisation de remove() avec et sans paramètres pour la suppression de nœuds

Remove, comme vide, est une méthode de suppression d'un élément, mais Remove supprimera l'élément lui-même et 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 click

<p class="hello"><p>php.cn</p></p>
$('.hello').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 a besoin à détruire. Il s'agit d'éviter " "Fuite de mémoire", les développeurs front-end doivent donc faire attention au nombre d'événements liés et n'oubliez pas de les détruire lorsqu'ils ne sont pas utilisés

Supprimez p et tous ses éléments internes. via la méthode Remove. La méthode de destruction d'événement sera automatiquement utilisée dans Remove , il est donc très simple d'utiliser

//通过remove处理
$('.hello').remove()
//结果：<p class="hello"><p>php.cn</p></p> 全部被移除
//节点不存在了,同事事件也会被销毁

Copier après la connexion

removeExpressionParamètres :

remove. est plus facile à utiliser que vide, c'est que 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 pouvons sélectionner un ensemble des mêmes éléments via $(), puis passez les règles de filtrage via Remove(), traitant ainsi

En comparant la zone de code à droite, nous pouvons la traiter comme ceci

$("p").filter(":contains(&#39;3&#39;)").remove()

Copier après la connexion

3 . La différence entre vide et supprimer lors de la suppression de nœuds

To Lorsqu'il est utilisé pour supprimer des éléments spécifiés, jQuery fournit deux méthodes, vide() et supprimer([expr]), qui suppriment toutes deux 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 le nœud, mais efface le nœud. Elle peut effacer tous les nœuds descendants de l'élément<.>

Vide ne peut pas supprimer son propre nœud

Méthode Remove

Le nœud et tous les nœuds descendants contenus dans le nœud seront supprimés en même temps

Fournit un passage une expression de filtrage pour supprimer des éléments dans la collection spécifiée

4. Suppression de nœud : opération de suppression de conservation des données detach()

Si nous voulons supprimer temporairement le nœud sur la page, mais vous ne souhaitez pas que les données et les événements sur le nœud soient perdus et peuvent les supprimer la prochaine fois. La section permet d'afficher le nœud supprimé sur la page. À ce stade, la méthode de détachement peut être utilisée pour traiter. il

détacher est facile à comprendre littéralement. Laissez un élément Web être hébergé. Autrement dit, l'élément est supprimé de la page actuelle, mais l'objet de modèle de mémoire de cet élément est conservé.

Jetons un coup d'œil à l'explication de la documentation officielle de jquery :

Cette méthode ne supprimera pas les éléments correspondants de l'objet jQuery, donc ces éléments correspondants pourront être réutilisés à l'avenir. Contrairement à Remove(), tous les événements liés, les données jointes, etc. seront conservés. La phrase $("p").detach() supprimera l'objet, mais l'effet d'affichage disparaîtra. Mais il existe toujours en mémoire. Lorsque vous ajoutez, vous revenez au flux de documents. Il est réapparu.

Bien sûr, une attention particulière doit être portée ici. La méthode detach est unique à JQuery, elle ne peut donc traiter que les événements ou les données liés via les méthodes JQuery

Passer tous les $("p").detach( ) Après avoir supprimé l'élément P, placez l'élément p supprimé sur la page via append. En cliquant sur le texte, vous pouvez prouver que l'événement n'est pas perdu

5. La différence entre detach(). et remove() pour la suppression de nœuds

JQuery est une bibliothèque d'outils très puissante, dans le développement du travail, certaines méthodes sont ignorées par nous car elles ne sont pas couramment utilisées ou n'ont pas été remarquées.

remove() et detach() en font peut-être partie. Peut-être que nous utilisons davantage Remove(), mais detach() peut être moins utilisé

remove: Remove node

<.>Sans paramètres, supprimez l'intégralité du nœud lui-même et tous les nœuds à l'intérieur du nœud, y compris les événements et les données sur le nœud

Avec paramètres, supprimez le nœud filtré et tous les nœuds à l'intérieur du nœud Tous les nœuds, y compris les événements et les données sur le nœud

detach : supprimer le nœud

Le traitement de la suppression est cohérent avec Remove

Différent de Remove(), toutes les liaisons Les événements, les données supplémentaires, etc. être conservé

Par exemple : $("p").detach() supprimera l'objet, mais l'effet d'affichage aura disparu. Mais il existe toujours en mémoire. Lorsque vous ajoutez, vous revenez au flux de documents. Il est réapparu.

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!