如何在jQuery中刪除最後一個子元素？-js教程-PHP中文網

如何在jQuery中刪除最後一個子元素？

WBOY

發布： 2024-02-19 21:40:24

原創

861 人瀏覽過

如何在jQuery中刪除最後一個子元素？

jQuery是一個流行的JavaScript函式庫，用於簡化Web開發中的許多任務，包括DOM操作。在網頁開發中，經常需要對DOM元素進行增刪改查的操作，其中刪除最後一個子元素也是常見需求。本文將介紹使用jQuery刪除最後一個子元素的幾種方法。

方法一：使用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>

登入後複製

在上面的程式碼中，透過點擊按鈕觸發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>

登入後複製

上述程式碼中，也是透過點擊按鈕觸發事件，選取parent元素的最後一個子元素並刪除之。

總結：

以上便是使用jQuery刪除最後一個子元素的兩種方法，開發者可以根據實際情況選擇適合的方式來操作DOM元素。 jQuery的彈性與便利性讓操作DOM變得簡單易懂，提升了Web開發效率。

以上是如何在jQuery中刪除最後一個子元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！