JavaScript使用ul中li标签实现删除效果
2019-04-15 18:02
1276 查看
本文实例为大家分享了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>
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 使用MVC中的HtmlHelper对象的ActionLink方法,实现一个Javascript:void(0)效果,去调用一个JS方法
- dojo的connect方法使用与源代码剖析(在JavaScript里实现类似AOP的效果)
- PHP网站使用JavaScript和Iframe简单实现部分刷新效果
- 使用JavaScript实现新闻滚动效果
- 使用JavaScript实现页面选项自动添加行以及删除行 javaweb
- Android 使用NineOldAndroids实现绚丽的ListView左右滑动删除Item效果
- 使用NineOldAndroids 实现 Android ListView左右滑动删除效果
- 使用javascript实现多个图片漂浮的效果(完善火狐滤镜功能)
- 【JAVASCRIPT】使用ztree树,实现右键增加,修改,删除节点。带有复选框。
- Android 使用Scroller实现绚丽的ListView左右滑动删除Item效果
- 使用JavaScript实现分页效果
- Android 使用Scroller实现绚丽的ListView左右滑动删除Item效果
- 【转】Android 使用NineOldAndroids实现绚丽的ListView左右滑动删除Item效果
- 使用javascript实现简单的选项卡切换效果
- 使用JAVASCRIPT实现动态增加、删除选择项
- 使用javascript实现某网站的头部广告向上切换效果
- dojo的connect方法使用与源代码剖析(在JavaScript里实现类似AOP的效果)
- 使用javascript实现的雪花飞舞的效果
- Android 使用NineOldAndroids实现绚丽的ListView左右滑动删除Item效果
- 使用javascript ajax C#实现类似百度的搜索框效果