Comment supprimer Li en javascript-js tutoriel-php.cn

Comment supprimer Li en javascript

藏色散人

Libérer： 2023-01-06 11:12:17

original

4061 Les gens l'ont consulté

Comment supprimer li en JavaScript : obtenez d'abord toutes les balises li ; puis déterminez si une certaine balise li est cliquée et enfin supprimez la balise li via la suppression.

Comment supprimer Li en javascript

L'environnement d'exploitation de cet article : système Windows7, version javascript1.8.5&&html5, ordinateur Dell G3.

JS implémente la suppression des balises li

En utilisant l'orientation objet en pensant compléter la fonction de suppression des informations de l'acheteur, chaque élément d'information comprend :

Nom
Numéro de téléphone
Numéro de téléphone
Province

Répondez aux exigences suivantes :
Vous ne pouvez pas emprunter de bibliothèques tierces et devez utiliser du code natif pour les implémenter.
Combiné avec la structure de code de base donnée, ajoutez le code dans les deux codes 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 de base :

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <!--code here-->
    <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</script></body></html>

Copier après la connexion

Notez que pour afficher clairement cette page sur les téléphones mobiles , vous devez utiliser des balises méta responsives :

 <meta name="viewport" content="width = device-width,initial-scale=1">

Copier après la connexion

Idée :

Récupérez d'abord toutes les balises li, puis déterminez sur quelle balise li vous avez cliqué, puis supprimez l'élément après avoir cliqué.
La fonction Contact a été donnée dans le code de base, et la méthode init doit être ajoutée à la fonction :

    Contact.prototype.init = function () {
        console.log("Test");        var p = document.getElementsByClassName("user-delete");        var ul = document.querySelector("#J_List");        var list = ul.querySelectorAll("li");        for (var i = 0; i < p.length; i++) {
            (function (i) {
                p[i].onclick = function () {
                    list[i].remove();
                    console.log(i);
                }
            })(i);
        }
    }    new Contact();

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!