JavaScript使用ul中li标签实现删除效果


Posted in Javascript onApril 15, 2019

本文实例为大家分享了js使用ul中li标签实现删除效果的具体代码,供大家参考,具体内容如下

<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      ul {
        list-style: none;
      }

      li {
        background-color: #ddd;
        margin-top: 2px;
      }

      li:hover {
        background-color: #be3131;
      }

      li.hover {
        background-color: green;
      }

      ;
    </style>
  </head>

  <body>
    <ul id="uid">
      <li>篮球</li>
      <li>足球</li>
      <li>羽毛球</li>
      <li>篮球</li>
      <li>足球</li>
      <li>羽毛球</li>
      <li>篮球</li>
      <li>足球</li>
      <li>羽毛球</li>
    </ul>
    <button onclick="doDel()">删除</button>
    <script type="text/javascript">
      //获取所有的li节点
      var list = document.getElementById("uid").getElementsByTagName("li");
      //给每一个li节点添加class属性
      for(var i = 0; i < list.length; i++) {
        list[i].onclick = function() {
          if(this.className == "hover") {
            this.className = "";
          } else {
            this.className = "hover";
          }

        }

      }

      //删除操作
      function doDel() {
        for(var i = 0; i < list.length; i++) {
          if(list[i].className == "hover") {
            list[i].parentNode.removeChild(list[i]);
            i--;
          }
        }
      }
    </script>
  </body>

</html>

效果图:

JavaScript使用ul中li标签实现删除效果

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

Javascript 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
Ext面向对象开发实践(续)
Nov 18 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
VSCode搭建Vue项目的方法
Apr 30 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 #Javascript
Vuex的actions属性的具体使用
Apr 14 #Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 #Javascript
vue自定义指令之面板拖拽的实现
Apr 14 #Javascript
详解Vue组件之间通信的七种方式
Apr 14 #Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 #Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 #Javascript
You might like
php环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
php树型类实例
2014/12/05 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
Python代码的打包与发布详解
2014/07/30 Python
详解Django中Request对象的相关用法
2015/07/17 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
python中的json总结
2018/10/11 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
使用Django清空数据库并重新生成
2020/04/03 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
Gap英国官网:Gap UK
2018/07/18 全球购物
EJB timer的种类
2014/10/28 面试题
CAD制图设计师自荐信
2014/01/29 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
教师党员承诺书2015
2015/01/21 职场文书
项目验收申请报告
2015/05/15 职场文书
班级管理经验交流材料
2015/11/02 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
用Java实现简单计算器功能
2021/07/21 Java/Android
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android