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 相关文章推荐
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
jQuery Tools tab使用介绍
Jul 14 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
javascript中caller和callee详解
Aug 10 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
一文搞懂ES6中的Map和Set
May 20 Javascript
个人小程序接入支付解决方案
May 23 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
js 浮动层菜单收藏
2009/01/16 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
python strip()函数 介绍
2013/05/24 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
python计算两个地址之间的距离方法
2018/06/09 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
《桃花心木》教学反思
2014/02/17 职场文书
治庸问责心得体会
2014/09/12 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server