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 相关文章推荐
ExtJS的FieldSet的column列布局
Nov 20 Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
理解JS事件循环
Jan 07 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
JavaScript中如何调用Java方法
Sep 16 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
PHP 万年历实现代码
2012/10/18 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
Js四则运算函数代码
2012/07/21 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
Python FTP操作类代码分享
2014/05/13 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
《母亲的恩情》教学反思
2014/02/13 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
小学生期末评语大全
2014/04/21 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
纪检监察建议书
2014/05/19 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
javascript Number 与 Math对象的介绍
2021/11/17 Javascript
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技