首页 > 开发 > JS > 正文

JS实现li标签的删除

2024-05-06 16:49:51
字体:
来源:转载
供稿:网友

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

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

实现以下要求: 

不能借用任何第三方库,需要使用原生代码实现。 
结合给出的基本代码结构,在下方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标签被点击,点击后进行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();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VeVb武林网。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表