知识点三：JQuery--删除元素/内容-remove/empty

最新推荐文章于 2021-09-04 15:47:37 发布
最新推荐文章于 2021-09-04 15:47:37 发布
阅读量520 收藏
点赞数
分类专栏： 前端 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35932345/article/details/53767540
版权

知识点三：JQuery--删除元素/内容

1、remove() -删除被选元素（及其子元素）：

可以根据class,Id标示进行删除

代码如下：


<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
	$(document).ready(function(){
		  $("button").click(function(){
   		 $(".italic").remove(".italic");
 	 });
});
	</script>
</head>

<body>

	<p>This is a paragraph in the div.</p>
	<p class="italic"><i>我即将被remove了，伤身啊！</i></p>
	<p class="italic"><i>我们是同胞，我也要被remove了，同病相怜啊！</i></p>
	<button>删除 class="italic" 的所有 p 元素</button>

</body>
</html>

2、empty() -从被选元素中删除子元素

代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
	$(document).ready(function(){
 	 $("button").click(function(){
  	  $("p").empty();
  	});
});
	</script>
	</head>

<body>

	<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
	哈哈，你要remove是p标签哦，不是我！哈哈哈
	<p>将要remove的元素1</p>
	<p>将要remove的元素2</p>
</div>

<br>
<button>清空 div 元素</button>

总结，其实remove与empty所起到的作用是一样的，将想要移除的元素移除！达到的是同样的目的！



流浪蓝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery中DOM节点删除之empty与remove
01-19
最近刚学了新知识，虽然是一个小知识点，但还是忍不住想和大家分享。本文的内容主要针对的是初学者，如果大家有什么意见或者问题都可以留言交流的，下面来看看详细的介绍吧。 .empty()是指对该节点后代的删除，结果...
jquery-3.2.1 API参考手册.chm
04-25
以下是基于jQuery 3.2.1版本的主要知识点： 1. **选择器（Selectors）**：jQuery提供了丰富的CSS选择器，如ID选择器(#id)，类选择器(.class)，元素选择器(element)，以及组合选择器，如后代选择器、子元素选择器、...
jQuery - 删除元素
01-15 399
http://www.w3school.com.cn/jquery/jquery_dom_remove.asp remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素
jQuery删除元素方法remove(),detach(),empty()
CJXBShowZhouyujuan的博客
07-21 1万+
1.empty() 它是清空节点，但是那些节点的标签还在。 结果是：p里面的都被删除了，而不是只有 class为hello的p 2.remove()  从DOM中删除所有匹配的元素。 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将
（十二）jQuery删除元素或内容的方法
北斗星的爱886的博客
07-07 523
1、remove()方法 删除被选元素及其子元素。 <div class="remove"> <p>好好学习，天天向上。</p> <span>卧槽，无情，好残忍！</span> <div>那我走？</div> </div> <br> <button>删除元素</button> 效果： 删除之前： 删除之后： 2、empty()方法 删除被选元素
jquery清空元素内容
热门推荐
wittdong的博客
04-14 1万+
$(".ls_list_a tbody").empty();
jquery-site5
05-15
- **添加/删除元素**：`.append()` 和 `.prepend()` 用于在元素内部添加内容，`.remove()` 和 `.empty()` 用于移除元素。 2. **事件处理**： - **绑定事件**：使用 `.on()` 方法可以绑定点击、改变等事件，如 `....
Jquery_Practice:本书3-第9章
05-11
2. **DOM操作**：jQuery提供了丰富的DOM操作方法，如`append()`用于在元素内部添加内容，`prepend()`在元素内部开头添加内容，`html()`和`text()`用于设置或获取元素的HTML或文本内容，`remove()`和`empty()`用于...
jQuery常用知识点总结以及平时封装常用函数
11-23
- `.remove()` 和 `.empty()`：删除元素或清空元素内容。 2. **样式操作** - `.css(property)`：获取或设置元素的CSS样式。如：`$("p").css("color", "red");` - `.addClass()` 和 `.removeClass()`：添加或移除...
jQuery 在容器内增加内容和删除内容
July.Code的网络笔记
05-31 8530
首先我们看一下有什么方法可以用。 jQuery - 添加元素 添加新的 HTML 内容 我们将学习用于添加新内容的四个 jQuery 方法： append() - 在被选元素的结尾插入内容prepend() - 在被选元素的开头插入内容after() - 在被选元素之后插入内容before() - 在被选元素之前插入内容 jQuery - 删除元素 删除
JQuery 添加元素(jquery对象)，删除元素( .remove())
houyanhua1的专栏
12-17 1万+
append()，appendTo()：追加子(标签)元素。 $(a).append($(b))  等同于   $(b).appendTo($(a)) prepend()，prependTo()：前加子(标签)元素 after()，insertAfter()：后加兄弟(标签)元素 before()，insertBefore()：前加兄弟(标签)元素 empty()：清空所有子(标签)元素。
Jquery之删除内容效果
a271720559的博客
08-05 3324
                                        Jquery之删除内容效果 jquery插件功能强大，今天我们来看看是实现删除内容的效果。 效果图： 我们点击右上角的x就会实现把这部分内容删掉。 实现思路： 首先写好页面样式后，引入jquery文件。在为x这个按钮添加点击事件。点击后获取父级元素，再使用jquery的动画事件： animate把整个...
jQuery删除元素或内容
大脸小覃的博客
09-09 494
删除元素/内容 remove()：删除被选元素 empty()：删除被选元素中子元素
html中清空元素文本内容,如何从html内容中删除“&nbsp”？
weixin_31616803的博客
06-07 777
我有一个html页面：Esquare Victory Campsite no 2429,general thimayya road, camp contonment,oppositekayani bakery, Pune - 020 2613 2975Hawaa HawaaiDrama - Hindi10:30am &nbsp3:45 &nbsp6:00 &nbsp8:30...
jQuery 删除元素
weixin_30289831的博客
02-21 146
通过 jQuery，可以很容易地删除已有的 HTML 元素。 删除元素/内容 如需删除元素和内容，一般可使用以下两个 jQuery 方法： remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素 jQuery remove() 方法 jQuery remove() 方法删除被选元素及其子元素。 实例 $("#div1").r...
SonarLint: Remove this empty statement.Unnecessary semicolon ‘；‘
慕白Lee的博客
09-04 956
Sonar常见问题及修改建议2021（持续更新！！） https://blog.csdn.net/libusi001/article/details/103717457 SonarLint：删除此空语句。 不必要的分号';' 有用请点赞，养成良好习惯！ 疑问、交流、鼓励请留言！ ...
mycat Mycat监控工具
积少成多
05-23 4867
Java过滤器与SpringMVC拦截器关系和区别、Java监听器
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head th:replace="blog/amaze/header::head-fragment"> </head> <body id="blog"> <div th:replace="blog/amaze/header::nav-fragment"></div> <div th:replace="blog/amaze/header::header-fragment"></div> <div class="am-g am-g-fixed blog-fixed"> <div th:replace="blog/amaze/blog-list::blog-list-fragment"></div> <div th:replace="blog/amaze/side::side-fragment"></div> </div> <footer th:replace="blog/amaze/footer::footer-fragment"></footer> </body> <script th:src="@{/blog/plugins/jquery/jquery.min.js}"></script> <script th:src="@{/blog/plugins/search/search.js}"></script> </html> 这个前端代码当中，使用到的前端技术有哪些
07-08
- jQuery：是一个JavaScript库，简化了对HTML文档遍历、事件处理、动画效果等操作的编程工作。 - Search.js：一个自定义的JavaScript文件，可能用于实现搜索功能。 以上就是这段前端代码中使用到的主要前端技术。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值