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 写类方式之三
Jul 05 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
vue实现搜索功能
May 28 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 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数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
Node.js事件驱动
2015/06/18 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
Python合并多个装饰器小技巧
2015/04/28 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
Python实现的rsa加密算法详解
2018/01/24 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
wxPython实现分隔窗口
2019/11/19 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
硕士研究生自我鉴定范文
2013/12/27 职场文书
保密协议书范本
2014/04/22 职场文书
运动会演讲稿
2014/05/07 职场文书
学校运动会报道稿
2014/09/23 职场文书