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 相关文章推荐
jQuery 跨域访问问题解决方法
Dec 02 Javascript
js parsefloat parseint 转换函数
Jan 21 Javascript
JS常用正则表达式总结
Nov 12 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
javascript数据类型示例分享
Jan 19 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 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
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
phpStorm2020 注册码
2020/09/17 PHP
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
用python 制作图片转pdf工具
2015/01/30 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
在Python中进行自动化单元测试的教程
2015/04/15 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
Python简单实现enum功能的方法
2016/04/25 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
Django的models中on_delete参数详解
2019/07/16 Python
python 错误处理 assert详解
2020/04/20 Python
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
物业公司采购员岗位职责
2013/12/31 职场文书
新娘父亲婚礼致辞
2014/01/16 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
法人代表委托书
2014/04/04 职场文书
心理健康日活动总结
2014/05/08 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python