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对象的property和prototype是什么一种关系
Aug 06 Javascript
jquery 应用代码 方便的排序功能
Feb 06 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
js实现楼层导航功能
Feb 23 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
基于js文件加载优化(详解)
Jan 03 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
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和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
JavaScript中this详解
2015/09/01 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
python实现ftp客户端示例分享
2014/02/17 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
行政经理岗位职责
2013/11/09 职场文书
好军嫂事迹材料
2014/01/15 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
党员评议个人总结
2014/10/20 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server