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 键盘keyCode键码值表
Dec 24 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
VueJS实现用户管理系统
May 29 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 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+MYSQL开发工具及资源收藏
2007/01/02 PHP
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
numpy数组拼接简单示例
2017/12/15 Python
在python中bool函数的取值方法
2018/11/01 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
Linux如何为某个操作添加别名
2013/03/01 面试题
活动总结怎么写啊
2014/05/07 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python