Comment supprimer le dernier élément enfant dans jQuery ?-js tutoriel-php.cn

Comment supprimer le dernier élément enfant dans jQuery ?

WBOY

Libérer： 2024-02-19 21:40:24

original

860 Les gens l'ont consulté

Comment supprimer le dernier élément enfant dans jQuery ?

jQuery est une bibliothèque JavaScript populaire utilisée pour simplifier de nombreuses tâches de développement Web, y compris la manipulation du DOM. Dans le développement Web, il est souvent nécessaire d'ajouter, de supprimer, de modifier et de vérifier des éléments DOM, et la suppression du dernier sous-élément est également une exigence courante. Cet article présentera plusieurs méthodes pour supprimer le dernier élément enfant à l'aide de jQuery.

Méthode 1 : utilisez la méthode 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>

Copier après la connexion

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

Copier après la connexion

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

jQuery fournit la méthode last(), qui peut sélectionner le dernier élément du résultat de la requête actuelle. En combinant cette méthode avec la méthode remove(), le dernier élément enfant peut être supprimé.

rrreee

Dans le code ci-dessus, en cliquant sur le bouton pour déclencher l'événement click de deleteBtn, jQuery sélectionnera le dernier de tous les éléments enfants de l'élément parent et le supprimera .

Méthode 2 : Utilisez le sélecteur :last-child 🎜🎜En plus d'utiliser la méthode last(), vous pouvez également utiliser le sélecteur :last- enfant fourni par jQuery Sélectionnez le dernier élément enfant et appelez la méthode remove() pour le supprimer. 🎜rrreee🎜Dans le code ci-dessus, l'événement est également déclenché en cliquant sur le bouton, en sélectionnant le dernier élément enfant de l'élément parent et en le supprimant. 🎜🎜Résumé : 🎜🎜Voici deux méthodes d'utilisation de jQuery pour supprimer le dernier élément enfant. Les développeurs peuvent choisir la méthode appropriée pour utiliser les éléments DOM en fonction de la situation réelle. La flexibilité et la commodité de jQuery rendent le fonctionnement du DOM simple et facile à comprendre, améliorant ainsi l'efficacité du développement Web. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!