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 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
js 创建书签小工具之理论
Feb 25 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 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
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
php把session写入数据库示例
2014/02/26 PHP
php生成圆角图片的方法
2015/04/07 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
Python实现一个简单的MySQL类
2015/01/07 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
python矩阵的转置和逆转实例
2018/12/12 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
python属于解释型语言么
2020/06/15 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
求职信模版
2013/11/30 职场文书
通用求职信范文模板分享
2013/12/27 职场文书
人事专员的职责
2014/02/26 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python