编程 Javascript

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

Posted in Javascript onApril 15, 2019

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

- Author -

拽是男人的本性

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

一些javascript一些题目的解析

Dec 25 Javascript

javascript学习笔记(十七) 检测浏览器插件代码

Jun 20 Javascript

javascript初学者常用技巧

Sep 02 Javascript

JavaScript采用递归算法计算阶乘实例

Aug 04 Javascript

JQuery 在文档中查找指定name的元素并移除的实现方法

May 19 Javascript

详解Angular 4.x NgIf 的用法

May 22 Javascript

JS字符串去除连续或全部重复字符的实例

Mar 08 Javascript

关于vue中 $emit的用法详解

Apr 12 Javascript

vue的token刷新处理的方法

Jul 17 Javascript

微信小程序实现元素渐入渐出动画效果封装方法

May 18 Javascript

关于javascript中的promise的用法和注意事项(推荐)

Jan 15 Javascript

webpack介绍使用配置教程详解webpack介绍和使用

Jun 25 Javascript

vue 父组件给子组件传值子组件给父组件传值的实例代码

Apr 15 #Javascript

Vuex的actions属性的具体使用

Apr 14 #Javascript

vue全局自定义指令-元素拖拽的实现代码

Apr 14 #Javascript

vue自定义指令之面板拖拽的实现

Apr 14 #Javascript

详解Vue组件之间通信的七种方式

Apr 14 #Javascript

浅谈Vue CLI 3结合Lerna进行UI框架设计

Apr 14 #Javascript

vue使用axios上传文件(FormData)的方法

Apr 14 #Javascript