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中显示隐藏的实现代码分析
Jul 26 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 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/06/27 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
10个简化PHP开发的工具
2014/12/25 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
js异或加解密效果代码
2008/06/25 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
vue 添加vux的代码讲解
2017/11/30 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
python破解zip加密文件的方法
2018/05/31 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
什么时候用assert
2015/05/08 面试题
矿泉水广告词
2014/03/20 职场文书
义和团口号
2014/06/17 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
团队拓展训练感想
2015/08/07 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS