欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript使用ul中l(wèi)i標簽實現刪除效果

 更新時間：2019年04月15日 08:38:39   作者：拽是男人的本性  
這篇文章主要為大家詳細介紹了JavaScript使用ul中l(wèi)i標簽實現刪除效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js使用ul中l(wèi)i標簽實現刪除效果的具體代碼，供大家參考，具體內容如下

<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節(jié)點
      var list = document.getElementById("uid").getElementsByTagName("li");
      //給每一個li節(jié)點添加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>

效果圖：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論