suchen

Heim  >  Artikel  >  Web-Frontend  >  Detailliertes Beispiel für den Unterschied zwischen leer und entfernen basierend auf DOM

Detailliertes Beispiel für den Unterschied zwischen leer und entfernen basierend auf DOM

小云云
小云云Original
2017-12-29 09:44:151432Durchsuche

Dieser Artikel enthält hauptsächlich einen Artikel über den Unterschied zwischen Leeren und Entfernen basierend auf dem Löschen von DOM-Knoten (ausführliche Erklärung). Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Das Entfernen von Knoten auf der Seite ist ein häufiger Vorgang für Entwickler. jQuery bietet verschiedene Methoden, um dieses Problem zu lösen.

empty Wie Der Name lässt vermuten, dass sich die Clear-Methode ein wenig vom Löschen unterscheidet, da sie nur alle untergeordneten Knoten im angegebenen Element entfernt.

Diese Methode entfernt nicht nur untergeordnete Elemente (und andere untergeordnete Elemente), sondern auch den Text innerhalb des Elements. Denn gemäß den Anweisungen wird jede Textzeichenfolge im Element als untergeordneter Knoten des Elements betrachtet. Schauen Sie sich bitte den folgenden HTML-Code an: 

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

Wenn wir alle Elemente in p über die leere Methode entfernen, wird nur der innere HTML-Code gelöscht, aber das Markup verbleibt weiterhin im DOM 

//通过empty处理
$('.hello').empty()

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

Alle p-Elemente unter dem aktuellen p-Element werden durch leer entfernt, aber das p-Element mit id=test wird nicht gelöscht 

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

entfernen ist dasselbe wie leer, beides sind Methoden zum Entfernen von Elementen, aber Remove entfernt das Element selbst und auch alles innerhalb des Elements, einschließlich gebundener Ereignisse und jQuery-Daten, die sich auf das Element beziehen.

Binden Sie beispielsweise für einen Knoten ein Klickereignis. 

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

Es ist eigentlich sehr einfach, diesen Knoten zu löschen, ohne die Entfernungsmethode zu verwenden, aber gleichzeitig muss das Ereignis vorhanden sein Dies soll ein „Speicherleck“ verhindern. Daher müssen Frontend-Entwickler darauf achten, wie viele Ereignisse verknüpft sind, und daran denken, sie zu zerstören, wenn sie nicht verwendet werden.

Entfernen Sie p und alle seine internen Elemente über die Methode „remove“. Die Methode zur Ereigniszerstörung wird automatisch in „remove“ ausgeführt, daher ist die Verwendung von 

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

Remove-Ausdrucksparameter:

Der Vorteil von „remove“ gegenüber „leer“ darin Sie können einen Selektorausdruck übergeben, um die zu entfernenden Elemente zu filtern. Passend zu einem Satz von Elementen können Sie bestimmte Knoten selektiv löschen.

Wir können einen Satz derselben Elemente über $() auswählen und dann die Filterung übergeben Regeln durch Remove(), also Verarbeitung 

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

Wenn Sie ein bestimmtes Element entfernen möchten, bietet jQuery zwei Methoden: empty() und remove([expr]). Beide löschen Elemente, aber dort Es gibt immer noch Unterschiede zwischen ihnen:

Wenn Sie bestimmte Elemente entfernen möchten, bietet jQuery zwei Methoden: empty() und remove([expr]). Beide löschen Elemente, aber es gibt immer noch Unterschiede zwischen ihnen

leere Methode

Genau genommen löscht die Methode empty() den Knoten nicht, sondern löscht den Knoten. Sie kann alle untergeordneten Knoten im Element löschen

empty kann nicht gelöscht werden sein eigener Knoten

Die Methode zum Entfernen

Der Knoten und alle im Knoten enthaltenen Nachkommenknoten werden gleichzeitig gelöscht

Stellt die Übergabe eines Filterausdrucks zum Löschen bereit Elemente in der angegebenen Sammlung

Oben Es ist der Unterschied zwischen den beiden. Lassen Sie uns unser Verständnis durch den Codeteil unten vertiefen

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

Verwandte Empfehlungen:

Einführung in die Funktionen is_null, isset und empty in PHP

Probleme mit leeren Zellen in CSS

Detaillierte Analyse der Leerzellen -cells-Attribut in der CSS-Tabelle

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für den Unterschied zwischen leer und entfernen basierend auf DOM. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Das Click-Ereignis löst die Inhaltsänderung des Span-Elements aus.Nächster Artikel：Das Click-Ereignis löst die Inhaltsänderung des Span-Elements aus.

In Verbindung stehende Artikel

Mehr sehen