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字符串判断方法整理
Oct 18 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
微信小程序拖拽排序列表的示例代码
Jul 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中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
JS作用域链详解
2017/06/26 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
python交互模式基础知识点学习
2020/06/18 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
如何判断计算机可能已经中马
2013/03/22 面试题
几个常见的软件测试问题
2016/09/07 面试题
校园安全演讲稿
2014/05/09 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
民事二审代理词
2015/05/25 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python