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 相关文章推荐
Prototype Template对象 学习
Jul 19 Javascript
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
asm.js使用示例代码
Nov 28 Javascript
jquery动态添加option示例
Dec 30 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
easyui-datagrid开发实践(总结)
Aug 02 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
将Vue组件库更换为按需加载的方法步骤
May 06 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中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
php实现用户登陆简单实例
2017/04/04 PHP
javascript add event remove event
2008/04/07 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
Javascript的闭包
2009/12/31 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
python编写简单爬虫资料汇总
2016/03/22 Python
Python地图绘制实操详解
2019/03/04 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
python批量修改ssh密码的实现
2019/08/08 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
在python中做正态性检验示例
2019/12/09 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
会计学应届毕业生推荐信
2013/11/04 职场文书
五年级科学教学反思
2014/02/05 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
国庆促销活动总结
2014/08/29 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
销售合作意向书范本
2015/05/08 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
python中tkinter复选框使用操作
2021/11/11 Python