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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 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+XML 制作简单的留言本 图文教程
2009/11/02 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
webpack4简单入门实例
2018/09/06 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
python获取标准北京时间的方法
2015/03/24 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
python实现简单日期工具类
2019/04/24 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
struct与class的区别
2014/02/03 面试题
岗位说明书标准范本
2014/07/30 职场文书
个人收入证明模板
2014/09/18 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
使用Python拟合函数曲线
2022/04/14 Python