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无缝滚动代码
Jan 03 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
JS获取当前时间戳方法解析
Aug 29 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 工厂模式使用方法
2010/05/18 PHP
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
jquery的live使用注意事项
2014/02/18 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
面包屑导航详解
2017/12/07 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
python求pi的方法
2014/10/08 Python
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
Python实现获取操作系统版本信息方法
2015/04/08 Python
Python的Django框架使用入门指引
2015/04/15 Python
Python内置函数OCT详解
2016/11/09 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
IBatis持久层技术
2016/07/18 面试题
医学专业大学生求职的自我评价
2013/11/27 职场文书
学校运动会开幕演讲稿
2014/01/04 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
中学生自我鉴定
2014/02/04 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server