js实现删除li标签一行内容


Posted in Javascript onApril 16, 2019

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

姓名(name)
性别(sex)
电话号码(number)
省份(province)

js实现删除li标签一行内容

实现以下要求:

不能借用任何第三方库,需要使用原生代码实现。
结合给出的基本代码结构,在下方2处code here补充代码,完成买家信息的删除功能,注意此页面要在手机上清晰显示。
js代码可以任意调整,例如和使用es6代码完成。

完成代码:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
   <!--code here-->
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui">
  <meta name="format-detection" content="telephone=no">
  <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
    Contact.prototype.init = function () {
      var oDiv = document.getElementsByClassName("user-delete");
      var oUl = document.querySelector("#J_List");
      var oList = oUl.querySelectorAll("li");

      for (var i = 0; i < oDiv.length; i++) {
        (function (i) {
          oDiv[i].onclick = function () {
            oList[i].remove();
            console.log(i);
          }
        })(i);
      }
    }
    new Contact();

  </script>
</body>
</html>

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

Javascript 相关文章推荐
这段js代码得节约你多少时间
Dec 20 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
Vue form表单动态添加组件实战案例
Sep 02 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 #Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 #Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 #Javascript
详解JavaScript中的强制类型转换
Apr 15 #Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 #Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 #Javascript
ES6知识点整理之模块化的应用详解
Apr 15 #Javascript
You might like
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
异步加载script的代码
2011/01/12 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
浅谈Python peewee 使用经验
2017/10/20 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
python程序封装为win32服务的方法
2021/03/07 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
对Python3 序列解包详解
2019/02/16 Python
python调用其他文件函数或类的示例
2019/07/16 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
初中生个人学习的自我评价
2013/12/04 职场文书
新学期红领巾广播稿
2014/01/14 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
教育教学工作反思
2016/02/24 职场文书