Das Entfernen von Elementen kann mit den folgenden vier Methoden durchgeführt werden: empty(), remove(), detach(), unwrap(). Betrachten Sie jede der Methoden im Detail. Am Ende jeder Methode wird vorgeschlagen, das Material mit einer kleinen Aufgabe zu sichern.

Ein Element mit der Methode empty() löschen.

   Die Methode empty() entfernt alle Innenseiten des entsprechenden Elements. Das Element nach der Verarbeitung durch diese Methode bleibt leer. Betrachten Sie ein Beispiel.

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(delFunc);
function delFunc() {
  // Löschen Sie alle drei Absätze.
  $('.deleteNow').empty();
}
</script>
</head>
<body>
  <div class="deleteNow">
    <p>Text-1</p>
    <p>Text-2</p>
    <p>Text-3</p>
  </div>
</body>
</html>

   Nach dem Ausführen der Funktion delFunc (); Alle drei Absätze werden gelöscht (<p>Text-1</ p> <p>Text-2</ p> <p>Text-3</p>) und wir erhalten den folgenden Seitencode.

Entfernen Sie ein Element mit der remove() -Methode.

  Die remove() – Methode ist leistungsfähiger: Sie entfernt nicht nur die untergeordneten Elemente innerhalb des gefundenen Elements, sondern auch das Element selbst. Das ist der Hauptunterschied von der Methode empty().

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(delFunc);
function delFunc() {
  // Löschen Sie alle drei Absätze.
  $('.deleteNow').remove();
}
</script>
</head>
<body>
  <div class="deleteNow">
    <p>Text-1</p>
    <p>Text-2</p>
    <p>Text-3</p>
  </div>
</body>
</html>

   Beim Ausführen der Funktion delFunc() Wir erhalten folgendes Ergebnis:

<body>
</body>

Löschen eines Elements mit der Methode detach().

   In jQuery wird das Löschen eines Elements mit der Methode detach () ausgeführt, wenn das zu löschende Element wiederhergestellt werden soll. Bei Verwendung dieser Methode können auch alle mit dem gelöschten Element verknüpften Ereignisse vollständig wiederhergestellt werden. Die remove() – Methode entfernt Ereignisse dauerhaft.

<!DOCTYPE html>
<head>
<style>
p.alarm { 
    background-color: orange; 
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(delFunc);
function delFunc() {
  // Legen Sie das Click-Ereignis auf den Absatz testDiv fest
  // Fügen Sie die alarm Klasse hinzu, wenn sie fehlt, und löschen Sie die alarm Klasse,
  // wenn sie bereits hat.
  $("#testDiv>p").click( function() {$(this).toggleClass("alarm");} );
   
  // Löschen Sie den testDiv-Absatz und stellen Sie ihn wieder her
  var test = $('#testDiv>p').detach();
      test.appendTo('#testDiv');
}
</script>
</head>
<body>
  <div id="testDiv">
    <p>Text-1</p>
  </div>
</body>

Im Beispiel verwenden wir zuerst die .detach() – Methode. das Element und das damit verbundene click -Ereignis gelöscht und die appendTo() – Methode verwendet; restauriert. Führen Sie ein Experiment durch – ersetzen Sie detach() durch remove(). Wird es möglich sein, seine Klasse durch Klicken auf einen Absatz zu ändern?

Ein Element mit der Methode unwrap() löschen.

   Unwrap() – Methode; verwendet, um das übergeordnete Element zu entfernen. Wrap – als der Umschlag übersetzt, dh das Element löschen, das das ausgewählte Element einschließt. Im Beispiel ist alles sofort klar.

<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(delFunc);
function delFunc() {
  // Удаляем элемент #mywrap, но сохраняем его содержимое
  $('#mytext').unwrap();
}
</script>
</head>
<body>
  <div id="mywrap">
    <p id="mytext">Text-0</p>
    <p>Text-1</p>
    <p>Text-2</p>
    <p>Text-3</p>
  </div>
</body>
</html>

   Der resultierende Seitencode lautet:

<body>
    <p id="mytext">Text-0</p>
    <p>Text-1</p>
    <p>Text-2</p>
    <p>Text-3</p>
</body>

   Und jetzt ist kein großer Test.

1. Was ist der Unterschied zwischen der Methode detach() und remove()?

 
 
 
 

2. unwrap () – wie wird wrap übersetzt?

 
 
 
 

3. remove () – die Methode entfernt:

 
 
 
 

4. Wie viele Entfernungsmethoden haben Sie gelernt?

 
 
 
 

5. appendTo() – die Methode führt Folgendes aus:

 
 
 
 

Question 1 of 5

Vielen Dank für das Lesen des Artikels! Ich hoffe irgendwo nützlich!