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>

效果圖：