Comment supprimer Li en javascript-Questions et réponses frontales-php.cn

Comment supprimer Li en javascript

藏色散人

Libérer： 2021-07-17 14:32:34

original

2924 Les gens l'ont consulté

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>

Copier après la connexion

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!