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 类与静态类的实现(续)
Apr 02 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
jquery插件validate验证的小例子
May 08 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
JS Canvas接口和动画效果大全
Apr 29 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
UCenter Home二次开发指南
2009/05/28 PHP
教大家制作简单的php日历
2015/11/17 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
Using the TextRange Object
2006/10/14 Javascript
filemanage功能中用到的lib.js
2007/04/08 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
javascript的函数作用域
2014/11/12 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
Python入门篇之字典
2014/10/17 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
python 网络编程常用代码段
2016/08/28 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
什么是Python变量作用域
2020/06/03 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
外企求职信范文分享
2013/12/31 职场文书
迟到检讨书5000字
2014/01/31 职场文书
大学校务公开实施方案
2014/03/31 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android