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 相关文章推荐
本地对象Array的原型扩展实现代码
Dec 04 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
ant design vue的form表单取值方法
Jun 01 Vue.js
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
PHP4之真OO
2006/10/09 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
php经典算法集锦
2015/11/14 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
可以文本显示的公告栏的js代码
2007/03/11 Javascript
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
python实现宿舍管理系统
2019/11/22 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
《二泉映月》教学反思
2014/04/15 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
文明城市创建标语
2014/06/16 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
社区植树节活动总结
2015/02/06 职场文书
2015年资料员工作总结
2015/04/25 职场文书
2016寒假假期总结
2015/10/10 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python