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 相关文章推荐
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
微信小程序实现单选功能
Oct 30 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 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
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
laravel 数据验证规则详解
2019/10/23 PHP
JS event使用方法详解
2008/04/28 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
关于Python的一些学习总结
2018/05/25 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
python基于opencv 实现图像时钟
2021/01/04 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
兼职学生的自我评价
2013/11/24 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
师范生求职自荐信
2014/06/14 职场文书
大学生创业计划书
2014/08/14 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
vue特效之翻牌动画
2022/04/20 Vue.js
Java存储没有重复元素的数组
2022/04/29 Java/Android