Exemple jQuery : Comment supprimer le dernier élément enfant à l'aide de jQuery ?-js tutoriel-php.cn

Exemple jQuery : Comment supprimer le dernier élément enfant à l'aide de jQuery ?

PHPz

Libérer： 2024-02-20 19:45:04

original

1123 Les gens l'ont consulté

Exemple jQuery : Comment supprimer le dernier élément enfant à laide de jQuery ?

Titre : Exemple jQuery : Comment supprimer le dernier élément enfant à l'aide de jQuery ?

Dans le développement Web, nous rencontrons souvent des situations où les éléments DOM doivent être manipulés via JavaScript. En tant que bibliothèque JavaScript largement utilisée, jQuery fournit de nombreuses méthodes pratiques pour manipuler les éléments DOM. Cet article utilisera un exemple pour présenter comment utiliser jQuery pour supprimer le dernier élément enfant et fournira des exemples de code détaillés.

Tout d'abord, nous devons introduire la bibliothèque jQuery dans le fichier HTML. Il peut être introduit via un lien CDN, ou vous pouvez télécharger le fichier de la bibliothèque jQuery et l'introduire dans le projet. Ensuite, créez un élément parent avec des éléments enfants en HTML afin que nous puissions montrer comment supprimer le dernier élément enfant.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery删除最后一个子元素</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="parentElement">
        <div>子元素1</div>
        <div>子元素2</div>
        <div>子元素3</div>
        <div>子元素4</div>
    </div>

    <button id="deleteButton">删除最后一个子元素</button>

    <script>
        $(document).ready(function(){
            $("#deleteButton").click(function(){
                $("#parentElement").children().last().remove();
            });
        });
    </script>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous créons d'abord un élément parent div qui contient plusieurs éléments enfants et ajoutons un bouton derrière lui. Lorsque l'utilisateur clique sur le bouton, le dernier élément enfant est supprimé via la fonction d'écoute d'événement click de jQuery. click事件监听函数，执行删除最后一个子元素的操作。

在click事件的处理函数中，通过选择器$("#parentElement")找到父元素div，并利用children().last().remove()

Dans la fonction de gestionnaire de l'événement click, recherchez l'élément parent div via le sélecteur $("#parentElement") et utilisez children(). last( ).remove() pour supprimer le dernier élément enfant de ce div.

Grâce à cet exemple de code, nous avons implémenté la fonction d'utilisation de jQuery pour supprimer le dernier élément enfant. En développement réel, vous pouvez modifier et étendre ce code en fonction de besoins et de situations spécifiques pour réaliser des opérations DOM plus complexes.

Résumé : cet article explique comment utiliser jQuery pour supprimer le dernier élément enfant à travers un exemple simple et démontre le processus d'implémentation en détail à travers des exemples de code. J'espère que cet article pourra aider les lecteurs à mieux comprendre et utiliser les méthodes de la bibliothèque jQuery et à améliorer l'efficacité du développement front-end. 🎜

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!