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 循环读取JSON数据的代码
Jul 17 Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
javascript实现标签切换代码示例
May 22 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
基于javascript处理nginx请求过程详解
Jul 07 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
JAVA/JSP学习系列之二
2006/10/09 PHP
Mysql的常用命令
2006/10/09 PHP
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
js实现DIV的一些简单控制
2007/06/04 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python字符串替换实例分析
2015/05/11 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
工业自动化专业毕业生推荐信
2013/11/18 职场文书
应用数学自荐书范文
2013/11/24 职场文书
电力安全事故反思
2014/04/27 职场文书
宣传普通话标语
2014/06/27 职场文书
违纪检讨书
2015/01/27 职场文书
黄石寨导游词
2015/02/05 职场文书
Python socket如何解析HTTP请求内容
2022/02/12 Python
Nginx配置根据url参数重定向
2022/04/11 Servers