자바스크립트에서 li을 삭제하는 방법-JS 튜토리얼-php.cn

자바스크립트에서 li을 삭제하는 방법

藏色散人

풀어 주다： 2023-01-06 11:12:17

원래의

4064명이 탐색했습니다.

자바스크립트에서 li를 삭제하는 방법: 먼저 모든 li 태그를 가져온 다음 특정 li 태그가 클릭되었는지 확인하고 마지막으로 제거를 통해 li 태그를 삭제합니다.

자바스크립트에서 li을 삭제하는 방법

이 기사의 운영 환경: windows7 시스템, javascript1.8.5&&html5 버전, Dell G3 컴퓨터.

JS는 li 태그 삭제를 구현합니다.

객체 지향적 사고를 사용하여 구매자 정보 삭제 기능을 완성합니다. 각 정보에는

이름
전화
전화번호가 포함됩니다.
Province

다음 요구 사항을 충족해야 합니다.
타사 라이브러리를 빌릴 수 없으며 이를 구현하려면 네이티브 코드를 사용해야 합니다.
제공된 기본 코드 구조와 결합하여 아래 두 코드에 코드를 추가하면 구매자 정보 삭제 기능이 완료됩니다. 이 페이지는 휴대폰에 명확하게 표시되어야 합니다.
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 name="viewport" content="width = device-width,initial-scale=1">

로그인 후 복사

아이디어:

먼저 모든 li 태그를 가져온 다음 어떤 li 태그가 무엇인지 결정하세요. 클릭 후 요소를 제거하려면 클릭하세요.
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 Advanced tutorial"

위 내용은 자바스크립트에서 li을 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!