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与DropDownList 区别分析
Jan 01 Javascript
两个比较有用的Javascript工具函数代码
Feb 17 Javascript
基于JQuery的asp.net树实现代码
Nov 30 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
解决vue请求接口第一次成功,第二次失败问题
Sep 08 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
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购物网站支付paypal使用方法
2010/11/28 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
Vue渲染函数详解
2017/09/15 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
Python基于pillow判断图片完整性的方法
2016/09/18 Python
python中import学习备忘笔记
2017/01/24 Python
Python用threading实现多线程详解
2017/02/03 Python
python使用opencv进行人脸识别
2017/04/07 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
英国电子专家:maplin
2019/09/04 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
护理职业应聘自荐书
2013/09/29 职场文书
医院后勤自我鉴定
2013/10/13 职场文书
学校元旦晚会方案
2014/02/19 职场文书
社区活动策划方案
2014/08/21 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
英雄儿女观后感
2015/06/09 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
在redisCluster中模糊获取key方式
2021/07/09 Redis