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 相关文章推荐
JAVASCRIPT keycode总结
Feb 04 Javascript
jquery监控数据是否变化(修正版)
Apr 12 Javascript
JavaScript 继承使用分析
May 12 Javascript
判定是否原生方法的JS代码
Nov 12 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 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
简单易用的计数器(数据库)
2006/10/09 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
jquery 设置style:display的方法
2015/01/29 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
python实现感知器算法(批处理)
2019/01/18 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
Django REST framework内置路由用法
2019/07/26 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
内容编辑个人求职信
2013/12/10 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
2014年审计工作总结
2014/11/17 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
使用JS实现简易计算器
2021/06/14 Javascript
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL