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的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
使用javascript插入样式
Mar 14 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 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页面运行时间的函数介绍
2013/07/01 PHP
php使用GeoIP库实例
2014/06/27 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
js网页版计算器的简单实现
2013/07/02 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
以windows service方式运行Python程序的方法
2015/06/03 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
python 基于wx实现音乐播放
2020/11/24 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
外语系毕业生自荐信范文
2013/12/16 职场文书
实习心得体会
2014/01/02 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
开平碉楼导游词
2015/02/06 职场文书
陪护人员误工证明
2015/06/24 职场文书