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简单实现登陆验证附效果图
Nov 19 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
js选项卡的制作方法
Jan 23 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 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数组(array)输出的三种形式详解
2013/06/05 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
简单了解python反射机制的一些知识
2019/07/13 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
捷克时尚网上商店:OTTO
2018/03/15 全球购物
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
入团者的自我评价分享
2013/12/02 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
工程项目建议书范文
2014/03/12 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
电台广播稿范文
2015/08/19 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers