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 对象、函数和继承
Jul 07 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
5个javascript的数字格式化函数分享
Dec 07 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 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
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
php检测useragent版本示例
2014/03/24 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
用JS实现的一个include函数
2007/07/21 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
vue的for循环使用方法
2019/02/12 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
python实现得到一个给定类的虚函数
2014/09/28 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
python 实现简单的FTP程序
2019/12/27 Python
Python线程threading模块用法详解
2020/02/26 Python
Python super()函数使用及多重继承
2020/05/06 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
JPA面试常见问题
2016/11/14 面试题
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
Python图像处理库PIL详细使用说明
2022/04/06 Python
git中cherry-pick命令的使用教程
2022/06/25 Servers