How to delete li in javascript-JS Tutorial-php.cn

How to delete li in javascript

藏色散人

Release： 2023-01-06 11:12:17

Original

4065 people have browsed it

How to delete li in javascript: first get all li tags; then determine whether a certain li tag is clicked; finally delete the li tag through remove.

How to delete li in javascript

The operating environment of this article: windows7 system, javascript1.8.5&&html5 version, Dell G3 computer.

JS implements the deletion of li tags

##Using object-oriented thinking to complete Buyer information deletion function, each piece of information includes:

Phone
Phone number
Province

Achieve the following requirements: You cannot borrow any third-party libraries and need to use native code to implement them.
Combined with the basic code structure given, add the code in the two code here below to complete the deletion function of buyer information. Note that this page must be clearly displayed on the mobile phone.
The js code can be adjusted arbitrarily, for example, it can be completed using es6 code.

Basic code:

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

Copy after login

Note that to display clearly on mobile phones, responsive meta tags should be used:

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

Copy after login

Idea:

Get all the li tags first, then determine which li tag was clicked, and then remove the element after clicking.

The Contact function has been given in the basic code, and the init method needs to be added to the function:

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

Copy after login

Recommended learning: "

javascript Advanced Tutorial"

The above is the detailed content of How to delete li in javascript. For more information, please follow other related articles on the PHP Chinese website!