js ul 清缓存_JS实现li标签的删除

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

姓名

电话

电话号码

省份

实现以下要求：

不能借用任何第三方库，需要使用原生代码实现。

结合给出的基本代码结构，在下方2处code here补充代码，完成买家信息的删除功能，注意此页面要在手机上清晰显示。

js代码可以任意调整，例如和使用es6代码完成。

基本代码：

demo

* {

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;

}

序号

姓名

性别

电话号码

省份

操作

• 1
  张三
  男
  13788888888
  浙江
  删除
• 2
  李四
  女
  13788887777
  四川
  删除
• 3
  王二
  男
  13788889999
  广东
  删除

// 此处也可换成ES6的写法

function Contact() {

this.init();

}

// your code here

注意此页面要在手机上清晰显示，则应使用响应式meta标签：

思路：

先获取所有的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();

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