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 相关文章推荐
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
浅析vue-router原理
Oct 19 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 Javascript
JavaScript中arguments的使用方法详解
Dec 20 Javascript
基于JavaScript实现随机点名器
Feb 25 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实现过滤字符串中的中文和数字实例
2015/07/29 PHP
分享PHP守护进程类
2015/12/30 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
js tab效果的实现代码
2009/12/26 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
python学生信息管理系统
2018/03/13 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
初中中等生评语
2014/12/29 职场文书
对学校的意见和建议
2015/06/04 职场文书
法定代表人身份证明书
2015/06/18 职场文书
大队委员竞选稿
2015/11/20 职场文书
远程教育培训心得体会
2016/01/09 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
PHP遍历数组的6种方式总结
2021/11/17 PHP
springboot用户数据修改的详细实现
2022/04/06 Java/Android