Rumah > Artikel > hujung hadapan web > javascript怎么删除li

javascript怎么删除li

藏色散人asal: 2021-05-11 16:17:204046semak imbas

javascript删除li的方法：首先获取所有的li标签；然后判断某个li标签是否被点击；最后通过remove删除li标签即可。

javascript怎么删除li

本文操作环境：windows7系统、javascript1.8.5&&html5版、Dell G3电脑。

JS实现li标签的删除

利用面向对象思想完成买家信息删除功能，每一条信息包含：

姓名
电话
电话号码
省份

实现以下要求：
不能借用任何第三方库，需要使用原生代码实现。
结合给出的基本代码结构，在下方2处code here补充代码，完成买家信息的删除功能，注意此页面要在手机上清晰显示。
js代码可以任意调整，例如和使用es6代码完成。

基本代码：

<!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>

注意此页面要在手机上清晰显示，则应使用响应式meta标签：

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

思路：

先获取所有的li标签，再判断哪个li标签被点击，点击后进行remove该元素操作。
基本代码中已经给出Contact函数，需要在函数中添加init方法：

    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();

推荐学习：《javascript高级教程》

Atas ialah kandungan terperinci javascript怎么删除li. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html5 es6 面向对象 JS 对象 li

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：javascript bom 有什么用Artikel seterusnya：js怎么改变css display属性的值

Artikel berkaitan

Lihat lagi