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 封装Ajax传递的数据代码
Jun 05 Javascript
加载jQuery后$冲突的解决办法
Jul 09 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
Element InputNumber计数器的使用方法
Jul 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
html中select语句读取mysql表中内容
2006/10/09 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
python 输出所有大小写字母的方法
2019/01/02 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
sklearn+python:线性回归案例
2020/02/24 Python
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
金融事务专业求职信
2014/04/25 职场文书
庆七一宣传标语
2014/10/08 职场文书
班级管理经验交流材料
2015/11/02 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
Pygame Rect区域位置的使用(图文)
2021/11/17 Python
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL