Bagaimana untuk mengalih keluar elemen anak terakhir dalam jQuery?-tutorial js-php.cn

Bagaimana untuk mengalih keluar elemen anak terakhir dalam jQuery?

WBOY

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

asal

905 orang telah melayarinya

Bagaimana untuk mengalih keluar elemen anak terakhir dalam jQuery?

jQuery ialah perpustakaan JavaScript popular yang digunakan untuk memudahkan banyak tugas dalam pembangunan web, termasuk manipulasi DOM. Dalam pembangunan web, selalunya perlu untuk menambah, memadam, mengubah suai dan menyemak elemen DOM, dan memadam sub-elemen terakhir juga merupakan keperluan biasa. Artikel ini akan memperkenalkan beberapa kaedah untuk memadam elemen anak terakhir menggunakan jQuery.

Kaedah 1: Gunakan kaedah 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>

Salin selepas log masuk

在上面的代码中，通过点击按钮触发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>

Salin selepas log masuk

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

jQuery menyediakan kaedah last(), yang boleh memilih elemen terakhir hasil pertanyaan semasa. Dengan menggabungkan kaedah ini dengan kaedah remove(), elemen anak terakhir boleh dialih keluar.

rrreee

Dalam kod di atas, dengan mengklik butang untuk mencetuskan peristiwa klik deleteBtn, jQuery akan memilih yang terakhir daripada semua elemen anak elemen parent dan memadamkannya .

Kaedah 2: Gunakan pemilih :last-child 🎜🎜Selain menggunakan kaedah last(), anda juga boleh menggunakan selector :last- anak disediakan oleh jQuery Pilih elemen anak terakhir dan panggil kaedah remove() untuk memadamkannya. 🎜rrreee🎜Dalam kod di atas, acara juga dicetuskan dengan mengklik butang, memilih elemen anak terakhir elemen ibu bapa dan memadamkannya. 🎜🎜Ringkasan: 🎜🎜Di atas adalah dua kaedah menggunakan jQuery untuk memadam elemen anak terakhir Pembangun boleh memilih kaedah yang sesuai untuk mengendalikan elemen DOM mengikut situasi sebenar. Fleksibiliti dan kemudahan jQuery menjadikan operasi DOM mudah dan mudah difahami, meningkatkan kecekapan pembangunan Web. 🎜

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar elemen anak terakhir dalam jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!