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

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

程序员文章站 2022-03-23 12:57: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标签实现删除效果

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

上一篇： 详解从0开始搭建微信小程序(前后端)的全过程

下一篇： js form表单input框限制20个字符，10个汉字代码实例

推荐阅读