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 相关文章推荐
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 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
一个用php3编写的简单计数器
2006/10/09 PHP
APMServ使用说明
2006/10/23 PHP
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
element中的$confirm的使用
2020/04/26 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
大学军训感言200字
2014/02/26 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
财务会计专业求职信
2014/06/09 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
支行行长岗位职责
2015/02/15 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers