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 相关文章推荐
js常见表单应用技巧
Jan 09 Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
json数据处理及数据绑定
Jan 25 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
JS实现继承的几种常用方式示例
Jun 22 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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
php桌面中心(三) 修改数据库
2007/03/11 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
简单的自定义php模板引擎
2016/08/26 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
vue中的inject学习教程
2019/04/24 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
详解Python中列表和元祖的使用方法
2015/04/25 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
工程造价自荐信
2013/10/09 职场文书
初中化学教学反思
2014/01/23 职场文书
2014年政协工作总结
2014/12/09 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB