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 相关文章推荐
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
js实现自定义进度条效果
Mar 15 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
jQuery实现轮播图及其原理详解
Apr 12 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
PHP校验ISBN码的函数代码
2011/01/17 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
python内置模块collections知识点总结
2019/12/19 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
python实现图片转字符画的完整代码
2021/02/21 Python
简单的JAVA编程面试题
2013/03/19 面试题
给面试官的感谢信
2014/02/01 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
2014年医务科工作总结
2014/12/18 职场文书
客户经理岗位职责
2015/01/31 职场文书
信用卡工资证明范本
2015/06/19 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
如何使用SQL Server语句创建表
2022/04/12 SQL Server