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 相关文章推荐
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
js数组去重的方法汇总
Jul 29 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 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
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
Javascript的闭包
2009/12/31 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
原生js实现点击轮播切换图片
2020/02/11 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python处理xml文件的方法小结
2017/05/02 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
python实现人像动漫化的示例代码
2020/05/17 Python
python各种excel写入方式的速度对比
2020/11/10 Python
超市中秋节活动方案
2014/02/12 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
企业安全生产承诺书
2014/05/22 职场文书
工会主席事迹材料
2014/06/03 职场文书
学习教师法的心得体会
2014/09/03 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
销售会议开幕词
2015/01/28 职场文书
法律意见书范文
2015/06/04 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
Hive HQL支持2种查询语句风格
2022/06/25 数据库