jQuery empty（）和remove（）示例

最新推荐文章于 2021-04-24 21:22:29 发布
最新推荐文章于 2021-04-24 21:22:29 发布
阅读量180 收藏
点赞数
文章标签： javascript ViewUI

jQuery empty（）和remove（）都用于删除匹配的元素，只是前者用于删除匹配元素的子元素； 而后者则用于完全删除所有匹配的元素。

例

2个div标签–“ BBox”是“ ABox”的子元素。 

<div class="ABox">
	I'm a A box
	<div class="BBox">I'm a B box</div>
</div>

1.空

empty（）将仅删除“ ABox”内容和“ BBox”子元素。 

$('.ABox').empty();

新结果将是： 

<div class="ABox">
</div>

2. remove（）

remove（）将完全删除所有“ ABox”和“ BBox”元素。 

$('.ABox').remove();

新结果将是： 

//nothing left

自己尝试 

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
	.ABox{
		padding:8px;
		border:1px solid blue;
	}
	.BBox{
		padding:8px;
		border:1px solid red;
	}
</style>

</head>
<body>
  <h1>jQuery empty() and remove() example</h1>

  <div class="ABox">
	I'm a A box
	<div class="BBox">I'm a B box</div>
   </div>
  
  <p>
  <button id="empty">empty()</button>
  <button id="remove">remove()</button>
  <button id="reset">reset</button>
  </p>
  
<script type="text/javascript">
	
    $("#reset").click(function () {
	  location.reload();
    });
	
    $("#empty").click(function () {
		
	  $('.ABox').empty();
	  
    });
	
    $("#remove").click(function () {
		
	  $('.ABox').remove();
	  
    });
	
	
</script>
</body>
</html>
试试演示
标签：

翻译自: https://mkyong.com/jquery/jquery-empty-and-remove-example/

cyan20115
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery中empty()方法与remove()方法
Liuxiaoyang1999的博客
11-11 399
目录 empty()方法: remove()方法: empty()方法: empty() ：删除匹配的元素集合中所有的子节点，但不包括自身; 代码示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> ...
详解jQuery中的empty、remove和detach
11-22
在jQuery中，`empty`, `remove`, 和 `detach` 是三个用于移除DOM元素的方法，它们之间存在微妙的差异。理解这些方法的区别对于优化JavaScript代码和防止内存泄露至关重要。 1. **empty**: 此方法不仅移除匹配元素内...
jquery 中的empty()和remove()
行天之路
11-25 1052
在jquery中empty()和remove()函数都用来移除匹配的元素，前者用来移除匹配元素的后代元素，然而后者用来移除所有匹配的元素及其所有的后代元素。   例子： 如以行的2个div标签，其中BBox是ABox的子标签。 divclass="ABox">         I'm a A box         divclass="BBox">I'm a B box/div>
JS应用小知识：$(‘#content‘).html(‘‘) 与 $(‘#content‘).empty()两种方式清除
╱/.独﹄無㈡oоΟ的博客
02-25 1894
我们在开发中有很多时候需要利用js来对一个dom元素进行清除操作，比如说清除input框中的内容,input绑定的id为 “content”，那么我们会有三种方式进行清除。 js原生方式进行清除 document.getElementById("content").value=""; 其他标签的话是（比如说span标签）：document.getElementById("tagName").innerHTML=""; jquery实现方式 // 第一种方式 $('#content').html('
jQuery里remove()和empty()的差别
XiaoBsEven的博客
08-18 295
在一开始用到这两个功能的时候,我认为两个方法的效果是相似的,用哪个都行,但是经过测试我发现,两者还是有较大不同的.废话不多,直接上代码~: &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&a
remove()和empty()方法删除DOM元素
XCMercy
07-04 1344
示例 &lt;div class="box1"&gt; &lt;h3&gt;I'm h3 element.&lt;/h1&gt; I'm text. &lt;p&gt;A&lt;/p&gt; &lt;p&gt;B&lt;/p&gt; &lt;p class="del-flag"&gt;C&
jQuery删除节点用法示例(remove方法)
10-21
同时，`remove()`和`empty()`的组合使用也能满足不同场景的需求。 在实际开发中，理解并熟练掌握`remove()`和相关方法，可以提高代码的可读性和效率，帮助我们更方便地管理页面内容。结合jQuery的其他功能，如事件...
jQuery删除节点的三个方法即remove()detach()和empty()
10-26
jQuery提供了三种主要的方法来实现这一目的：`remove()`、`detach()`和`empty()`。每种方法都有其特定的用途和行为，下面我们将详细探讨这三个方法。 1. `remove()`方法： `remove()`是最常用的删除节点的方法，它...
jQuery 删除或是清空某个HTML元素示例
11-30
本文将详细讲解jQuery中的`remove()`和`empty()`方法，并通过实例演示它们如何工作。 `remove()`方法是jQuery中用来删除元素的一个核心功能。当你调用`remove()`时，它会从DOM树中移除指定的选择器匹配的所有元素，...
jQuery学习-节点操作
qq_43368682的博客
08-14 74
动态创建元素 方式一 <div id="box"></div> var spanNode1=$("<span>创建元素</span>") $("#box").append(spanNode1) //也可以 spanNode1.appendTo('#box') 方式二 <div id="box"></div> var node=$("#box").html("<li>内容</li>") 加入元素 <div
JQuery中的remove()和empty()方法
qq_42305089的博客
09-23 1212
remove()方法：删除JQuery对象对应的DOM节点 empty()方法:清空JQuery()对象对应的DOM对象的所有子节点  
jq中html(""),empty()和remove()区别
前端一线搬运工的博客
12-05 2898
  比如$("p").empty()和$("p").html("")，都是把&lt;p&gt;abcd&lt;/p&gt;中的文本移除，留下 了&lt;p&gt;&lt;/p&gt;,仍保留其在dom中所占的位置。 但是html("")会造成内存泄漏,empty()会释放内存,感兴趣的朋友可以用html（""）,empty("&q
1+X Web前端（初级）理论题考试样题及答案（建议收藏）
弹了个球
04-24 2万+
（一）单选题 1、以下关于网页结构说法错误的是（） A、HTML文件是结构层 B、CSS文件是表示层 C、JS文件是行为层 D、CSS文件是行为层 2、给以下代码中id名为con的元素设置样式正确的是（）。 <div class=”box”> <div class=”main” id=”con”>祝您好运！</div> </div> A、.box>.main{font:16px;}B、.b...
jQuery - remove() 方法
余光的博客
08-17 2308
这是我在面试中遇到的一个问题，知识点不难，希望我们共勉~ 移除所有 &lt;p&gt; 元素： $("button").click(function(){ $("p").remove(); }); 定义和用法 remove() 方法移除被选元素，包括所有文本和子节点。 该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。 但除了这个元素本身得以保...
JQuery empty方法和remove方法的区别
limlimlim的专栏
07-03 1万+
empty方法             #main{width:200px;margin:auto;border:1px solid red;}                                 $(function () {             //清空div中的innerHTML,注意此时div还是存在的             $("#btnClea
说一说Jquery中的empty()与remove()的区别和用法
sxs161028的博客
07-03 2456
今天在改一个新人写的代码，好吧，我承认改代码与自己写代码要来的痛苦。 主要是在测试一个table。table中有一列是同删除操作。我的删除功能是 这样的，当点击删除的时候，判断这个table中的tr行，是否大于1，如果大等于1的话，我就查询上一页的数据（因为此页仅有的一条数据将会从数据库中删除）。如果大于1的话，就继续重新查询这条数据。（本来以我的作风就不再调用查询接口查询数据，我会直接将tab
jQuery 文档操作 - remove() 方法
lxw1844912514的博客
04-08 825
移除所有 <p> 元素： 定义和用法 remove() 方法移除被选元素，包括所有文本和子节点。 该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。 但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。 语法 ...
JS、JQ中remove()、empty
ITBwy的博客
09-14 2382
在JQ中的，要用到移除指定元素的时候，发现empty()与remove([expr])都可以用来实现。可仔细观察效果的话就可以发现。 empty()是只移除了 指定元素中的所有子节点，拿$("p").empty()来说，他只是把dsfsd中的文本给移除了，而留下 了,仍保留其在dom中所占的位置。 remove([expr])则是把其从dom中删除，而不会保留其所占的位置。 例: He
jquery的元素删除操作
天空守护云
03-05 126
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值