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类继承机制的原理分析
Sep 12 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
js比较日期大小的方法
May 12 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 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发送短信代码分享
2015/08/11 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
JavaScript 模拟用户单击事件
2009/12/31 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
医学院四年学习生活的自我评价
2013/11/06 职场文书
经济管理专业毕业生推荐信
2013/11/11 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
理财学专业自荐书
2014/06/28 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
校运会班级霸气口号
2015/12/24 职场文书
python基础之停用词过滤详解
2021/04/21 Python
对Keras自带Loss Function的深入研究
2021/05/25 Python
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
python基础之函数的定义和调用
2021/10/24 Python