JS li 태그 삭제 실현

4037 단어 jsli 태그
대상 을 대상 으로 하 는 사상 을 이용 하여 구매자 정보 삭제 기능 을 완성 하고 모든 정 보 는 다음 과 같다.
  • 이름
  • 전화
  • 전화번호

  • 다음 요 구 를 실현 합 니 다.
    어떠한 제3자 라 이브 러 리 도 빌려 쓸 수 없 으 며,원생 코드 를 사용 하여 실현 해 야 한다.
    제 시 된 기본 코드 구 조 를 결합 하여 아래 2 곳 의 code here 에서 코드 를 보충 하고 구매자 정보의 삭제 기능 을 완성 하 며 이 페이지 는 핸드폰 에 선명 하 게 표시 되 어야 합 니 다.
    js 코드 는 임의로 조정 할 수 있 습 니 다.예 를 들 어 es6 코드 를 사용 하여 완성 할 수 있 습 니 다.
    기본 코드:
    
    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="utf-8">
     <!--code here-->
     <title>demo</title>
     <style>
      * {
       padding: 0;
       margin: 0;
      }
    
      .head, li div {
       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>
    <div id="J_container">
     <div class="record-head">
      <div class="head id">  </div>
      <div class="head name">  </div>
      <div class="head sex">  </div>
      <div class="head tel">    </div>
      <div class="head province">  </div>
      <div class="head">  </div>
     </div>
     <ul id="J_List">
      <li>
       <div class="id">1</div>
       <div class="name">  </div>
       <div class="sex"> </div>
       <div class="tel">13788888888</div>
       <div class="province">  </div>
       <div class="user-delete">  </div>
      </li>
      <li>
       <div class="id">2</div>
       <div class="name">  </div>
       <div class="sex"> </div>
       <div class="tel">13788887777</div>
       <div class="province">  </div>
       <div class="user-delete">  </div>
      </li>
      <li>
       <div class="id">3</div>
       <div class="name">  </div>
       <div class="sex"> </div>
       <div class="tel">13788889999</div>
       <div class="province">  </div>
       <div class="user-delete">  </div>
      </li>
     </ul>
    </div>
    
    <script>
     //       ES6   
     function Contact() {
      this.init();
     }
    
     // your code here
    </script>
    </body>
    </html>
    이 페이지 가 휴대 전화 에 선명 하 게 표시 되 려 면 응답 식 meta 라벨 을 사용 해 야 합 니 다.
    
    <meta name="viewport" content="width = device-width,initial-scale=1">
    생각:
    모든 li 탭 을 가 져 온 다음 에 어떤 li 탭 이 클릭 되 었 는 지 판단 하고 클릭 한 후에 reove 요 소 를 진행 합 니 다.
    기본 코드 에 Contact 함 수 를 제 시 했 습 니 다.함수 에 init 방법 을 추가 해 야 합 니 다.
    
    Contact.prototype.init = function () {
      console.log("Test");
      var div = document.getElementsByClassName("user-delete");
      var ul = document.querySelector("#J_List");
      var list = ul.querySelectorAll("li");
    
      for (var i = 0; i < div.length; i++) {
       (function (i) {
        div[i].onclick = function () {
         list[i].remove();
         console.log(i);
        }
       })(i);
      }
     }
    
    new Contact();
    
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

    좋은 웹페이지 즐겨찾기