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 相关文章推荐
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
JavaScript 如何计算文本的行数的实现
Sep 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
服务器端解压缩zip的脚本
2006/12/22 PHP
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
$.format,jquery.format 使用说明
2011/07/13 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
Python常用列表数据结构小结
2014/08/06 Python
Python实现处理管道的方法
2015/06/04 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
基于Python log 的正确打开方式
2018/04/28 Python
python中join()方法介绍
2018/10/11 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
经济学人订阅:The Economist
2018/07/19 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
医生实习工作总结的自我评价
2013/09/27 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
《影子》教学反思
2014/02/21 职场文书
奶茶店创业计划书
2014/08/14 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
Python Pandas常用函数方法总结
2021/06/15 Python
Python实现归一化算法详情
2022/03/18 Python