JS实现li标签的删除

2019-11-19 11:48:07

字体：大中小

来源：转载

供稿：网友

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

姓名
电话
电话号码
省份

实现以下要求：

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

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

上一篇：详解Vue中使用插槽（slot）、聚类插槽

下一篇：vue中多路由表头吸顶实现的几种布局方式