jQuery 删除或是清空某个HTML元素示例


Posted in Javascript onAugust 04, 2014

jQuery使用下面两个方法来删除或是清空某个HTML元素。

remove() ? 删除指定的元素(包括其子元素)
empty() ? 清空指定元素的子元素

例如:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>JQuery Demo</title> 
<script src="scripts/jquery-1.9.1.js"></script> 
<script> 
$(document).ready(function () { 
$("button").click(function () { 
$("#div1").remove(); 
}); 
}); 
</script> 
</head> 
<body> 

<div id="div1" style="height: 100px; width: 300px; 
border: 1px solid black; background-color: yellow;"> 
This is some text in the div. 
<p>This is a paragraph in the div.</p> 
<p>This is another paragraph in the div.</p> 

</div> 
<br> 
<button>Remove div element</button> 

</body> 
</html>
empty:
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>JQuery Demo</title> 
<script src="scripts/jquery-1.9.1.js"></script> 
<script> 
$(document).ready(function () { 
$("button").click(function () { 
$("#div1").empty(); 
}); 
}); 
</script> 
</head> 
<body> 

<div id="div1" style="height: 100px; width: 300px; 
border: 1px solid black; background-color: yellow;"> 
This is some text in the div. 
<p>This is a paragraph in the div.</p> 
<p>This is another paragraph in the div.</p> 

</div> 
<br> 
<button>Empty the div element</button> 

</body> 
</html>

jQuery的remove()方法也支持一个参数,可以用于过滤一些需要删除的HTML元素。这个参数可以为任何有效的jQuery selector.
比如下面代码只删除class=”italic”的<p>元素:

$("p").remove(".italic");
Javascript 相关文章推荐
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 #Javascript
与Math.pow 相反的函数使用介绍
Aug 04 #Javascript
简单易用的倒计时js代码
Aug 04 #Javascript
javascript中with()方法的语法格式及使用
Aug 04 #Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 #Javascript
checkbox选中与未选中判断示例
Aug 04 #Javascript
Node.js插件的正确编写方式
Aug 03 #Javascript
You might like
一段防盗连的PHP代码
2006/12/06 PHP
一些PHP写的小东西
2006/12/06 PHP
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
php实现的漂亮分页方法
2014/04/17 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
js函数的引用, 关于内存的开销
2012/09/17 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
Python中join和split用法实例
2015/04/14 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
学生生病请假条范文
2014/02/16 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
防灾减灾标语
2014/10/07 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
团结主题班会
2015/08/13 职场文书
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers