Wie entferne ich das letzte untergeordnete Element in jQuery?-js-Tutorial-php.cn

Wie entferne ich das letzte untergeordnete Element in jQuery?

WBOY

Freigeben： 2024-02-19 21:40:24

Original

861 Leute haben es durchsucht

Wie entferne ich das letzte untergeordnete Element in jQuery?

jQuery ist eine beliebte JavaScript-Bibliothek, die zur Vereinfachung vieler Aufgaben in der Webentwicklung, einschließlich der DOM-Manipulation, verwendet wird. In der Webentwicklung ist es häufig erforderlich, DOM-Elemente hinzuzufügen, zu löschen, zu ändern und zu überprüfen, und auch das Löschen des letzten Unterelements ist eine häufige Anforderung. In diesem Artikel werden verschiedene Methoden zum Löschen des letzten untergeordneten Elements mithilfe von jQuery vorgestellt.

Methode 1: Verwenden Sie die Methode last()last()方法

jQuery提供了last()方法，可以选取当前查询结果的最后一个元素。通过结合这个方法和remove()方法，可以删除最后一个子元素。

<!DOCTYPE html>
<html>
<head>
  <title>删除最后一个子元素示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="parent">
    <div>子元素1</div>
    <div>子元素2</div>
    <div>子元素3</div>
  </div>
  <button id="deleteBtn">删除最后一个子元素</button>

  <script>
    $(document).ready(function(){
      $('#deleteBtn').click(function(){
        $('#parent').children().last().remove();
      });
    });
  </script>
</body>
</html>

Nach dem Login kopieren

在上面的代码中，通过点击按钮触发deleteBtn的click事件，jQuery会选取parent元素的所有子元素中的最后一个并删除之。

方法二：使用:last-child选择器

除了使用last()方法，还可以使用jQuery提供的选择器:last-child选取最后一个子元素，然后调用remove()方法来删除。

<!DOCTYPE html>
<html>
<head>
  <title>删除最后一个子元素示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="parent">
    <div>子元素1</div>
    <div>子元素2</div>
    <div>子元素3</div>
  </div>
  <button id="deleteBtn">删除最后一个子元素</button>

  <script>
    $(document).ready(function(){
      $('#deleteBtn').click(function(){
        $('#parent :last-child').remove();
      });
    });
  </script>
</body>
</html>

Nach dem Login kopieren

上述代码中，也是通过点击按钮触发事件，选取parent

jQuery stellt die Methode last() bereit, mit der das letzte Element des aktuellen Abfrageergebnisses ausgewählt werden kann. Durch die Kombination dieser Methode mit der Methode remove() kann das letzte untergeordnete Element entfernt werden.

rrreee

Im obigen Code wählt jQuery durch Klicken auf die Schaltfläche zum Auslösen des Klickereignisses von deleteBtn das letzte aller untergeordneten Elemente des parent-Elements aus und löscht es .

Methode 2: Verwenden Sie den Selektor :last-child 🎜🎜Zusätzlich zur Verwendung der Methode last() können Sie auch den Selektor :last- verwenden Von jQuery bereitgestelltes untergeordnetes Element Wählen Sie das letzte untergeordnete Element aus und rufen Sie die Methode remove() auf, um es zu löschen. 🎜rrreee🎜Im obigen Code wird das Ereignis auch dadurch ausgelöst, dass auf die Schaltfläche geklickt, das letzte untergeordnete Element des parent-Elements ausgewählt und gelöscht wird. 🎜🎜Zusammenfassung: 🎜🎜Die oben genannten Methoden sind zwei Methoden zur Verwendung von jQuery zum Löschen des letzten untergeordneten Elements. Entwickler können die geeignete Methode zum Betreiben von DOM-Elementen entsprechend der tatsächlichen Situation auswählen. Die Flexibilität und Bequemlichkeit von jQuery machen die Bedienung von DOM einfach und leicht verständlich und verbessern so die Effizienz der Webentwicklung. 🎜

Das obige ist der detaillierte Inhalt vonWie entferne ich das letzte untergeordnete Element in jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!