欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-23 14:25:01
本文实例为大家分享了js使用ul中li标签实现删除效果的具体代码，供大家参考，具体内容如下 ...

本文实例为大家分享了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标签实现删除效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： Win10 20H2更新后频繁蓝屏死机怎么办? 安装KB4586853即可解决

下一篇： 实力这么强大的王莽，为什么会输给刘秀这个无名小卒？

推荐阅读