recherche

Maison  >  Article  >  interface Web  >  Comment supprimer un élément de liste ajouté à l'aide de JavaScript ?

Comment supprimer un élément de liste ajouté à l'aide de JavaScript ?

王林
王林avant
2023-09-13 21:25:081188parcourir

如何使用 JavaScript 删除已添加的列表项？

En HTML, les développeurs peuvent utiliser la balise « ul » pour créer une liste d'éléments. Nous pouvons ajouter tous les éléments associés à une seule liste. Nous pouvons également utiliser JavaScript pour gérer les éléments de la liste.

Parfois, les développeurs doivent ajouter ou supprimer des éléments de liste à l'aide de JavaScript. Nous pouvons accéder aux éléments de la liste en utilisant des valeurs d'attribut spécifiques et supprimer les éléments de la liste à l'aide de la méthode removechild().

Dans ce didacticiel, nous prendrons en compte les commentaires de l'utilisateur et supprimerons les éléments de la liste en fonction de la valeur.

Grammaire

Les utilisateurs peuvent supprimer les éléments de liste ajoutés à l'aide de javaScript selon la syntaxe suivante

var item = document.getElementById(ID);
list.removeChild(item);

Dans la syntaxe ci-dessus, nous utilisons id pour accéder à l'élément de liste. Après cela, nous supprimons l’élément de liste sélectionné de la liste à l’aide de la méthode Removechild().

Exemple 1 (Suppression d'éléments dynamiques de la liste)

Dans l'exemple ci-dessous, nous créons une liste avec l'identifiant égal à "voitures". De plus, nous avons créé des zones de saisie pour obtenir les valeurs des éléments de liste de l'utilisateur. De plus, nous avons créé des boutons d'ajout de voiture et de suppression de voiture qui appellent les fonctions addCar() et RemoveCar() lorsque l'utilisateur clique sur le bouton correspondant.

En JavaScript, nous accédons aux valeurs de saisie de liste et de texte. Dans la fonction addCar(), nous créons d’abord l’élément de liste, puis définissons l’identifiant de l’élément de liste. Ensuite, nous créons un nœud de texte, l'ajoutons à l'élément de liste, puis utilisons la méthode appendchild() pour ajouter l'élément de liste à la liste. 

<html>
<body>
    <h2> Removing the <i> dynamic list items </i> from the list using JavaScript</h2>
    <ul id = "cars">
    </ul>
    <input type = "text" id = "carName" />
    <button onclick = "addCar()"> Add car </button>
    <button onclick = "removeCar()"> Remove car </button>
    <script>
        var carList = document.getElementById("cars");
        var carName = document.getElementById("carName");
        function addCar() {
            var li = document.createElement("li");
            li.setAttribute('id', carName.value);
            let text = document.createTextNode(carName.value);
            li.appendChild(text);
            carList.appendChild(li);
        }
        function removeCar() {
            var item = document.getElementById(carName.value);
            carList.removeChild(item);
        }
    </script>
</html>

Exemple 2 (Supprimer le dernier élément de la liste)

Dans l'exemple ci-dessous, nous utilisons JavaScript pour supprimer le dernier élément de la liste. Cet exemple est très similaire au premier exemple, mais la différence est que nous supprimons le dernier élément de liste dans cet exemple et l'élément de liste dynamique dans le premier exemple.

Dans la fonction RemoveCar(), nous utilisons la propriété 'lastElementChild' pour obtenir le dernier élément enfant de la liste. Après cela, nous supprimons le dernier élément s'il existe.

Dans la sortie, l'utilisateur peut ajouter plusieurs éléments à la liste et cliquer sur le bouton Supprimer pour supprimer les éléments de la liste. 

<html>
<body>
    <h2> Removing the <i> last list item </i> from the list using JavaScript </h2>
    <ul id = "cars">
    </ul>
    <input type = "text" id = "carName" />
    <button onclick = "addCar()"> Add car </button>
    <button onclick = "removeCar()"> Remove last car </button>
    <script>
        var carList = document.getElementById("cars");
        var carName = document.getElementById("carName");
        function addCar() {
            var li = document.createElement("li");
            li.setAttribute('id', carName.value);
            let text = document.createTextNode(carName.value);
            li.appendChild(text);
            carList.appendChild(li);
        }
        // function to remove the last element from the list
        function removeCar() {
            // select the last element
            var lastElement = carList.lastElementChild;
            // if the last element is present, then remove it
            if (lastElement) {
                carList.removeChild(lastElement);
            }
        }
    </script>
</html>

Exemple 3

Dans l'exemple ci-dessous, nous utilisons JavaScript pour supprimer tous les éléments de la liste. Ici, nous créons la liste des projets.

En JavaScript, nous avons défini la fonction addItem() pour ajouter des éléments et la fonction clearAll() pour supprimer tous les éléments de la liste. Dans la fonction clearAll(), nous utilisons l'attribut "firstchild" pour obtenir le premier enfant de la liste et utilisons la méthode removechild() pour supprimer l'enfant. Nous utilisons une boucle while pour itérer jusqu'à ce que tous les enfants de la liste soient supprimés.

Dans la sortie, l'utilisateur peut appuyer sur le bouton Effacer tout pour supprimer tous les éléments de la liste. 

<html>
<body>
   <h2> Removing the <i> all last list items </i> from the list using JavaScript</h2>
   <ul id = "itmes">
   </ul>
   <input type = "text" id = "itemValue" />
   <button onclick = "addItems()"> Add itmes </button>
   <button onclick = "clearAll()"> clear list </button>
   <script>
      var items = document.getElementById("itmes");
      var itemValue = document.getElementById("itemValue");
      function addItems() {
         var li = document.createElement("li");
         li.setAttribute('id', itemValue.value);
         let text = document.createTextNode(itemValue.value);
         li.appendChild(text);
         items.appendChild(li);
        }
        // function to clear all the list items
      function clearAll() {
         while (items.firstChild) {
         items.removeChild(items.firstChild);
         }
      }
   </script>
</html>

Conclusion

Les utilisateurs ont appris à supprimer les éléments dynamiques des listes. L'approche de base est que chaque élément de liste doit avoir un identifiant unique pour accéder et supprimer les éléments de liste dynamiques. Ici, nous utilisons la valeur de l'élément de liste comme identifiant de l'identifiant lui-même.

Dans le deuxième exemple, nous supprimons uniquement le dernier élément enfant de la liste ; dans le troisième exemple, nous supprimons tous les éléments de la liste ensemble.

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!

JavaScript html while 标识符 循环 ul
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment remplacer un élément HTML par un autre élément en utilisant JavaScript ?Article suivant：Comment remplacer un élément HTML par un autre élément en utilisant JavaScript ?

Articles Liés

Voir plus