Home > Article > Web Front-end > How to delete li in javascript

How to delete li in javascript

藏色散人Original: 2021-05-11 16:17:204046browse

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.

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>

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

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

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

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!

JavaScript html5 es6 面向对象 JS 对象 li

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is the use of javascript bom?Next article：What is the use of javascript bom?

See more

How to delete li in javascript

Related articles