JS实现li标签的删除


Posted in Javascript onApril 12, 2019

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

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

实现以下要求:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS随即打乱数组实现代码
Dec 03 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 #Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 #Javascript
如何检查一个对象是否为空
Apr 11 #Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 #Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 #Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 #Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 #Javascript
You might like
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Python合并字符串的3种方法
2015/05/21 Python
python框架django基础指南
2016/09/08 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
Python测试人员需要掌握的知识
2018/02/08 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
python 调用有道api接口的方法
2019/01/03 Python
python使用requests.session模拟登录
2019/08/09 Python
Python shutil模块用法实例分析
2019/10/02 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
Python 字符串池化的前提
2020/07/03 Python
电子专业推荐信范文
2013/11/18 职场文书
法学专业毕业生自荐信范文
2013/12/18 职场文书
早读迟到检讨书
2014/01/24 职场文书
学生鉴定评语大全
2014/05/05 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
质检员岗位职责
2015/02/03 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL