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

2019-11-19 11:47:00

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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>

效果图：