So löschen Sie li in Javascript-js-Tutorial-php.cn

So löschen Sie li in Javascript

藏色散人

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

Original

4074 Leute haben es durchsucht

So löschen Sie li in Javascript: Rufen Sie zuerst alle li-Tags ab. Bestimmen Sie dann, ob auf ein bestimmtes li-Tag geklickt wird. Löschen Sie schließlich das li-Tag.

So löschen Sie li in Javascript

Die Betriebsumgebung dieses Artikels: Windows7-System, Javascript 1.8.5 und HTML5-Version, Dell G3-Computer.

JS realisiert das Löschen von Li-Tags

Verwenden Sie objektorientiertes Denken, um die Funktion zum Löschen von Käuferinformationen abzuschließen. Jede Information enthält:

Name
Telefon
Telefonnummer
Provinz

Erfüllen Sie die folgenden Anforderungen:
Sie können keine Bibliotheken von Drittanbietern ausleihen und müssen zur Implementierung nativen Code verwenden.
Fügen Sie in Kombination mit der angegebenen Grundcodestruktur den Code hier unten im 2. Code hinzu, um die Löschfunktion der Käuferinformationen abzuschließen. Beachten Sie, dass diese Seite deutlich auf dem Mobiltelefon angezeigt werden muss.
Der js-Code kann beliebig angepasst werden, beispielsweise kann er mit es6-Code vervollständigt werden.

Basiscode:

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

Nach dem Login kopieren

Beachten Sie, dass Sie zur klaren Anzeige dieser Seite auf Mobiltelefonen responsive Meta-Tags verwenden sollten:

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

Nach dem Login kopieren

Idee:

Besorgen Sie sich zuerst alle Li-Tags und bestimmen Sie dann, um welches Li-Tag es sich handelt verwendet Klicken Sie, um das Element nach dem Klicken zu entfernen.
Die Kontaktfunktion wurde im Basiscode angegeben und die Init-Methode muss zur Funktion hinzugefügt werden:

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

Nach dem Login kopieren

Empfohlenes Lernen: „Javascript-Tutorial für Fortgeschrittene“

Das obige ist der detaillierte Inhalt vonSo löschen Sie li in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!