jQuery - 删除元素

通过 jQuery，可以很容易地删除已有的 HTML 元素。

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

jQuery remove() 方法

jQuery remove() 方法删除被选元素及其子元素。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.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;">嗯唔~~  这是 div 中的一些文本。<p>这是在 div 中的一个段落。</p><p>这是在 div 中的另外一个段落。</p></div>
<br>
<button>移除div元素</button></body>
</html>

嗯唔~~ jQuery empty() 方法

jQuery empty() 方法删除被选元素的子元素。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").empty();});});</script>
</head>
<body><div id="div1" style="height:200px;width:300px;border:1px solid black;background-color:yellow;">嗯唔，这是 div 中的一些文本，只清除文本。<p>这是在 div 中的一个段落。</p><p>这是在 div 中的另外一个段落。</p></div>
<br>
<button>清空div元素</button></body>
</html>

嗯唔~~ 过滤被删除的元素

jQuery remove() 方法也可接受一个参数

允许我们对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p> 元素：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("p").remove(".italic");});});</script>
</head>
<body><p>这是一个段落。</p>
<p class="italic"><i>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<button>很帅气~~     移除所有  class="italic" 的 p 元素。</button></body>
</html>

夜光带你走进Jquery（十四）擅长的领域相关推荐

夜光带你走进Jquery（十五）擅长的领域
夜光序言: 回眸,撩起云水边的清凉,拢一袖的香,岁月行的如此悠远. 万般情愫,曾经的过往,彼时的欢喜,早在不语间随如水的文字流泻. 正文: jQuery 操作 CSS jQuery 拥有若干进行 CS ...
夜光带你走进JavaScript（四十六）擅长的领域
夜光序言: 从一开始以为这个世界上只有自己,到明白自己的天赋其实只够做一个不错的普通人. 然后人就长大了正文: 事件冒泡或事件捕获? 事件传递有两种方式:冒泡与捕获. 事件传递定义了元素事件触发的顺 ...
夜光带你走进设计模式（四）
夜光序言: 柔情似水如梦,昏沉迷惘度年. 红尘作伴如你,萧瑟千里独行. 正文:单例模式嘿哈~~:单例模式(Singleton Pattern)是 Java 中最简单的设计模式之一.这种类型的设计模式 ...
夜光带你走进Hibernate（四）
夜光序言: 孤独放生春风窗外全是寂寞拍拍肩头前尘奔跑依旧继续. 正文: 1. hibernate对象状态 session.save(对象); 临时状态 1 . 直接new出来的对象 2. 不处于 ...
夜光带你走进软件工程（四）
夜光序言: 如果可以长生,你愿意永远活在黑夜吗? 正文:
CYQ.Data 轻量数据层之路使用篇-MAction 取值赋值视频[带音乐] F (二十四)
CYQ.Data 轻量数据层之路使用篇-MAction 取值赋值视频[带音乐] F (二十四) 说明: 本次录制主要为使用篇:CYQ.Data 轻量数据层之路使用篇三曲 MAction 取值赋值 ...
带您聚焦第十四届中国航展新看点
11月8日,备受全球瞩目的第十四届中国国际航空航天博览会在珠海国际航展中心开幕.本届航展为期6天,室内展览面积达10万平方米,线上线下共有43个国家和地区的740余家企业参展.深圳航天工研院以&quo ...
夜光带你走进微信小程序开发（四十二）擅长的领域
夜光序言: 世人笑我痴红尘,不过红尘恋伊人. 正文: 以道御术 / 以术识道 /*夜光: pages/g ...
夜光带你走进 Java 成神之路--Spring（四十六）擅长的领域
夜光序言: 人生不要被过去所控制,决定你前行的,是未来; 人生不要被安逸所控制,决定你成功的,是奋斗; 人生不要被别人所控制,决定你命运的,是自己; 人生不要被金钱所控制,决定你幸福的,是知足; 人生 ...

夜光带你走进Jquery（十四）擅长的领域

夜光序言：

一杯香茗，任岁月荏苒，落花成冢，独守一份清静

寂寞在心尖的边缘躁动，悠然品茗静谧韵味。

轻轻的推开紫纱轩窗，清风柔柔地将思绪挑逗，伸手，掬起一捧月色，吟唱一首离殇婉约的诗词

正文：