Maison > Article > interface Web > Exemple détaillé de la différence entre vide et supprimer basé sur DOM

Exemple détaillé de la différence entre vide et supprimer basé sur DOM

小云云original: 2017-12-29 09:44:151415parcourir

Cet article vous propose principalement un article sur la différence entre vider et supprimer en fonction de la suppression du nœud DOM (explication détaillée). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

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 vide et de suppression

empty. son nom l'indique, la méthode clear est un peu différente de la suppression 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>

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处理
$('.hello').empty()

//结果：<p>这是p标签</p>被移除
<p class="hello"></p>

Tous les éléments p sous l'élément p actuel sont supprimés via vide, mais l'élément p avec id=test n'est pas 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('click', function() {
    //通过empty移除了当前p元素下的所有p元素
    //但是本身id=test的p元素没有被删除
    $("#test").empty()
  })
  </script>
</body>

</html>

remove est identique à vide, les deux sont des méthodes de suppression d'éléments, mais Remove supprimera l'élément lui-même, ainsi que tout ce qui se trouve à l'intérieur de l'élément, 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>这是P段落</p></p>
$('.hello').on("click",fn)

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 opérée à l'intérieur de Remove , il est donc très simple d'utiliser le paramètre

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

remove expression :

L'avantage de Remove que de Empty est. que vous pouvez passer une expression de sélection pour filtrer les éléments à supprimer Correspondant à un ensemble d'éléments, vous pouvez supprimer sélectivement les nœuds spécifiés

Nous pouvons sélectionner un ensemble des mêmes éléments via $(), puis passer le filtrer les règles via remove(), traitant ainsi

<!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('click', function() {
    //删除整个 class=test1的p节点
    $(".test1").remove()
  })

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

</html>

Lorsque vous souhaitez supprimer un élément spécifié, jQuery propose deux méthodes : vide() et supprimer([expr]). il y a encore des différences entre eux :

Lorsque vous souhaitez supprimer des éléments spécifiés, jQuery propose deux méthodes : empty() et delete([expr]). Les deux suppriment des éléments, mais il existe toujours des différences entre elles.

Méthode vide

À proprement parler, la méthode vide() 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

La 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 le passage d'une expression de filtrage à supprimer les éléments de la collection spécifiée

Ci-dessus C'est la différence entre les deux Approfondissons notre compréhension à travers la partie de code ci-dessous

<!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>
  .left,
  .right {
    width: 300px;
  }
  
  .left p,
  .right p {
    width: 100px;
    height: 90px;
    padding: 5px;
    margin: 5px;
    float: left;
    border: 1px solid #ccc;
  }
  
  .left p {
    background: #bbffaa;
  }
  
  .right p {
    background: yellow;
  }
  </style>
</head>

<body>
  <h2>通过empty与remove移除元素</h2>
  <p class="left">
    <button id="bt1">点击通过jQuery的empty移除内部P元素</button>
    <button id="bt2">点击通过jQuery的remove移除整个节点</button>
  </p>
  <p class="right">
    <p id="test1">
      <p>p元素1</p>
      <p>p元素2</p>
    </p>
    <p id="test2">
      <p>p元素3</p>
      <p>p元素4</p>
    </p>
  </p>
  <script type="text/javascript">
  $("#bt1").on('click', function() {
    //删除了2个p元素，但是本着没有删除 
    $("#test1").empty()
  })

  $("#bt2").on('click', function() {
    //删除整个节点
    $("#test2").remove()
  })
  </script>
</body>

</html>

Recommandations associées :

Introduction aux fonctions is_null, isset, empty en php

Problèmes concernant les cellules vides en css

Analyse détaillée des vides -attribut cellules dans la table CSS

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：L'événement click déclenche le changement de contenu de l'élément span.Article suivant：L'événement click déclenche le changement de contenu de l'élément span.

Articles Liés

Voir plus