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 相关文章推荐
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 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定时执行计划任务的多种方法小结
2011/12/19 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
php 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
小程序实现多选框功能
2018/10/30 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
python用户管理系统的实例讲解
2017/12/23 Python
python实现图片识别汽车功能
2018/11/30 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
护士毕业实习感言
2014/03/05 职场文书
本科生就业推荐信
2014/05/19 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
总经理岗位职责范本
2015/04/01 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
使用Django框架创建项目
2022/06/10 Python