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进行拖拽
Jul 20 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 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
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
python中正则表达式的使用详解
2014/10/17 Python
Python实现批量读取word中表格信息的方法
2015/07/30 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
Python 如何对文件目录操作
2020/07/10 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
上海期货面试题
2014/01/31 面试题
2015初中团支部工作总结
2015/07/21 职场文书
7个关于Python的经典基础案例
2021/11/07 Python
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android