1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

      JS实现li标签的删除

       更新时间£º2019年04月12日 08:34:40   作者£ºHades_Dev   我要评论

      这篇文章主要为大家详细介绍了JS实现li标签的删除£¬具有一定的参?#25216;?#20540;£¬感兴趣的小伙伴们可以参?#23478;?#19979;

      利用面向对象思想完成买家信息删除功能£¬每一条信息包含£º

      • 姓名
      • 电话
      • 电话号码
      • 省份

      实现以下要求£º

      不能借用任何第三方库£¬需要使用原生代码实现¡£
      结?#32454;?#20986;的基本代码结构£¬在下方2处code here补充代码£¬完成买家信息的删除功能£¬注意此页面要在手机上清晰显示¡£
      js代码可以?#25105;?#35843;整£¬例如和使用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标签被点击£¬点击后进行remove该元素操作¡£

      基本代码中已经给出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();
      

      以上就是本文的全部内容£¬希望对大家的学习有所帮助£¬也希望大家多多支持脚本之家¡£

      相关文章

      最新评论

      3dÊÔ»úºÅÖвÊÍø

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>