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.Encode手动解码技巧
Jul 14 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
jquery的live使用注意事项
Feb 18 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 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中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
php数组查找函数总结
2014/11/18 PHP
php通过session防url攻击方法
2014/12/10 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
Node.js简单入门前传
2017/08/21 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
Python列表切片常用操作实例解析
2020/03/10 Python
Python如何实现的二分查找算法
2020/05/27 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
敏捷开发的主要原则都有哪些
2015/04/26 面试题
考试不及格的检讨书
2014/01/22 职场文书
护士节策划方案
2014/05/19 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
公司行政管理制度范本
2015/08/05 职场文书
php去除数组中为0的元素的实例分析
2021/11/17 PHP
Java使用HttpClient实现文件下载
2022/08/14 Java/Android