jQuery实现删除li节点的方法


Posted in Javascript onDecember 06, 2016

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
list-style: none;
}
li {
line-height: 25px;
margin-top: 3px;
}
li:hover {
background-color: #ddd;
}
li.hover {
background-color: #fc0;
}
</style>
<script src="./jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$(function() {
//获取每一个li节点并设置点击事件
$("li").click(function() {
//当点击某一个节点的时候,增加类名为hover
$(this).toggleClass("hover");
});
//获取删除按钮并设置点击事件
$("button").click(function() {
//将类名是hover的节点删除
$("li.hover").remove();
});
});
</script>
</head>
<body>
<h2 id="hid">jQuery实例--节点删除</h2>
<ul>
<li>asdfasdfasfd</li>
<li>asdfasdfasfd</li>
<li>asdfasdfasfd</li>
<li>asdfasdfasfd</li>
<li>asdfasdfasfd</li>
<li>asdfasdfasfd</li>
</ul>
<button>删除</button>
</body>
</html>

jQuery实现删除li节点的方法

以上所述是小编给大家介绍的jQuery实现删除li节点的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
Node.js中的流(Stream)介绍
Mar 30 Javascript
javascript数据类型验证方法
Dec 31 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 Javascript
vue中template的三种写法示例
Oct 21 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 #Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 #Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 #Javascript
vue2.0开发实践总结之入门篇
Dec 06 #Javascript
微信小程序中单位rpx和rem的使用
Dec 06 #Javascript
JavaScript定时器实现的原理分析
Dec 06 #Javascript
原生js实现弹出层登录拖拽功能
Dec 05 #Javascript
You might like
php GUID生成函数和类
2014/03/10 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
浅析Python中的for 循环
2016/06/09 Python
python ddt实现数据驱动
2018/03/14 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
应聘英语教师求职信
2014/04/24 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
追讨欠款律师函
2015/06/24 职场文书