Maison  >  Article  >  interface Web  >  Comment supprimer Li en javascript

Comment supprimer Li en javascript

藏色散人
藏色散人original
2021-07-17 14:32:342863parcourir

Comment supprimer li avec JavaScript : créez d'abord un exemple de fichier HTML ; puis créez le contenu de la balise li ; enfin utilisez la fonction "op[i].onclick = () {oList[i].remove()...} " Méthode Supprimez simplement une ligne de contenu dans la balise li.

Comment supprimer Li en javascript

L'environnement d'exploitation de cet article : système windows7, javascript version 1.8.5, ordinateur DELL G3

Comment supprimer li de javascript ?

Native Js réalise la suppression d'une ligne de contenu dans la balise li

En utilisant la pensée orientée objet pour compléter la fonction de suppression des informations sur l'acheteur, chaque information contient :

Nom (nom)
Sexe (sexe)
Numéro de téléphone (numéro)
Province (province)

Comment supprimer Li en javascript

met en œuvre les exigences suivantes :

ne peut emprunter aucune bibliothèque tierce et doit être implémenté en utilisant du code natif.
En combinaison avec la structure de code de base donnée, ajoutez le code dans le code 2 ci-dessous pour compléter la fonction de suppression des informations de l'acheteur. Notez que cette page doit être clairement affichée sur le téléphone mobile.
Le code js peut être ajusté arbitrairement, par exemple, il peut être complété en utilisant le code es6.

Code terminé :

<!DOCTYPE html><html><head>
  <meta charset="utf-8">
     <!--code here-->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui">
    <meta name="format-detection" content="telephone=no">
    <title>demo</title>
    <style>
        * { padding: 0; margin: 0;}
        .head, li p { display: inline-block; width: 70px; text-align: center; }
        li .id, li .sex, .id, .sex { width: 15px; }
        li .name, .name { width: 40px; }
        li .tel, .tel { width: 90px; }
        li .del, .del { width: 15px; }
        ul { list-style: none; }
        .user-delete { cursor: pointer; }
  </style></head><body>
    <p id="J_container">
            <p class="record-head">
                <p class="head id">序号</p>
                <p class="head name">姓名</p>
                <p class="head sex">性别</p>
                <p class="head tel">电话号码</p>
                <p class="head province">省份</p>
                <p class="head">操作</p>
            </p>
            <ul id="J_List">
                <li>
                        <p class="id">1</p>
                        <p class="name">张三</p>
                        <p class="sex">男</p>
                        <p class="tel">13788888888</p>
                        <p class="province">浙江</p>
                        <p class="user-delete">删除</p>
                </li>
                <li>
                        <p class="id">2</p>
                        <p class="name">李四</p>
                        <p class="sex">女</p>
                        <p class="tel">13788887777</p>
                        <p class="province">四川</p>
                        <p class="user-delete">删除</p>
                </li>
                <li>
                        <p class="id">3</p>
                        <p class="name">王二</p>
                        <p class="sex">男</p>
                        <p class="tel">13788889999</p>
                        <p class="province">广东</p>
                        <p class="user-delete">删除</p>
                </li>
            </ul>
    </p>

    <script>

        // 此处也可换成ES6的写法
        function Contact(){
            this.init();
        }        // your code here
        Contact.prototype.init = function () {
            var op = document.getElementsByClassName("user-delete");            var oUl = document.querySelector("#J_List");            var oList = oUl.querySelectorAll("li"); 

            for (var i = 0; i < op.length; i++) {
                (function (i) {
                    op[i].onclick = function () {
                        oList[i].remove();
                        console.log(i);
                    }
                })(i);
            }
        }        new Contact();    </script></body></html>

Apprentissage recommandé : "Tutoriel avancé javascript"

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn