溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

javascript然后移除li

發(fā)布時(shí)間：2021-07-19 15:53:28 來(lái)源：億速云 閱讀：171 作者：chen 欄目：web開發(fā)

這篇文章主要講解了“javascript然后移除li”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“javascript然后移除li”吧！

javascript移除li的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后創(chuàng)建li標(biāo)簽內(nèi)容；最后通過“op[i].onclick = function () {oList[i].remove()...}”方法刪除li標(biāo)簽一行內(nèi)容即可。

本文操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版，DELL G3電腦

javascript怎么移除li？

原生Js實(shí)現(xiàn)刪除li標(biāo)簽一行內(nèi)容利用面向?qū)ο笏枷胪瓿少I家信息刪除功能，每一條信息包含：

姓名（name）
性別（sex）
電話號(hào)碼（number）
省份（province）

javascript然后移除li

實(shí)現(xiàn)以下要求：

不能借用任何第三方庫(kù)，需要使用原生代碼實(shí)現(xiàn)。
結(jié)合給出的基本代碼結(jié)構(gòu)，在下方2處code here補(bǔ)充代碼，完成買家信息的刪除功能，注意此頁(yè)面要在手機(jī)上清晰顯示。
js代碼可以任意調(diào)整，例如和使用es6代碼完成。

完成代碼：

<!DOCTYPE html><html><head>
  <meta charset="utf-8">
     <!--code here-->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui">
    <meta name="format-detection" content="telephone=no">
    <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">序號(hào)</p>
                <p class="head name">姓名</p>
                <p class="head sex">性別</p>
                <p class="head tel">電話號(hào)碼</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
        Contact.prototype.init = function () {
            var op = document.getElementsByClassName("user-delete");            var oUl = document.querySelector("#J_List");            var oList = oUl.querySelectorAll("li"); 

            for (var i = 0; i < op.length; i++) {
                (function (i) {
                    op[i].onclick = function () {
                        oList[i].remove();
                        console.log(i);
                    }
                })(i);
            }
        }        new Contact();    </script></body></html>

感謝各位的閱讀，以上就是“javascript然后移除li”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)javascript然后移除li這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手