jQuery之删除节点

最新推荐文章于 2023-06-16 20:36:22 发布
最新推荐文章于 2023-06-16 20:36:22 发布
阅读量884 收藏
点赞数 1
分类专栏： jQuery 文章标签： 程序菜鸟成长记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44544363/article/details/86550212
版权

jQuery之删除节点

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
开发工具与关键技术：Visual Studio 2015 jQuery
作者：林敏
撰写时间：2019年1月19日
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
这里我们来学习jQuery删除节点的方法，jQuery提供了empty()与remove([expr])二种方法，两个都是删除元素，但是它们之间是有区别的，下面让我们来深入了解它们。

首先写好页面布局，如图：（注：本页面布局引入了bootstrap插件和jQuery插件）
在这里插入图片描述
源代码：
在这里插入图片描述
CSS样式：
在这里插入图片描述
先用alert（）输出来检测按钮点击事件是否绑定成功，这一步骤不能疏漏，若绑定失败会影响后面代码的执行。
在这里插入图片描述
检测完成后我们来运用第一个删除元素empty，empty可清空指定元素中的子节点，注意不是删除元素本身
在这里插入图片描述
我们来看一下点击empty按钮实现的效果，
在这里插入图片描述
可见指定的左右div内的子节点都被清空了。

我们再来看第二个删除元素remove，它可移除整个指定的节点，亦可移除指定的元素，
在这里插入图片描述
如图，remove移除了指定的右边整个div的内容，
在这里插入图片描述
如图，运用remove表达式参数，左右div内容中选中的“二”，“三”两个元素被移除掉了，
在这里插入图片描述

以上就是jQuery删除节点中的两种方法，empty是清空指定元素内的子节点，remove是移除指定的整个节点或者指定的元素，记得要区分它们哦！赶紧去尝试一下吧！

注：以上为本人课堂学习总结

PinkMooAᨐ
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery怎样移除所选节点下的所有子节点
10-11 1101
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...
jquery之删除节点
u011526599的专栏
07-23 1169
jquery删除节点
jquery删除节点
qq_28596151的博客
05-23 8733
    jquery提供了3中删除节点的方法。分别是remove()、detach()、empty()。1、remove()方法1.1、$(selector).remove()的使用    解释：删除匹配到的文档中的元素节点，同时返回删除的节点引用。我们可以在后面的业务如果需要继续使用。1.2、$(selectorA).remove(selector)的使用    解释：需要先匹配需要删除的元素节...
jquery 节点的删除
m0_62360527的博客
05-16 2078
1.remove() remove() 方法移除被选元素，包括所有的文本和子节点，以及事件。 $(function(){ $('ul').remove() }) <ul class="5"> 123 <li title="篮球" class="3">篮球</li> <li title="足球">足球</li> <li title..
jQuery删除节点
weixin_30321709的博客
01-13 481
jQuery提供了三种删除节点的方法，即remove(),detach()和empty() 1: remove() 方法 作用是从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素。 $("ul li:eq(1)").remove(); //获取第2个元素节点后，将它从网页中删除 2:detach() 方法 detach() 方法...
Jquery使用Remove方法删除元素节点
qq_42757177的博客
04-26 1312
使用Jquery的方法remove()删除节点时，每删除一个节点，其索引会变化, 可以在删除索引后，改变循环的值 使用jQuery的remove方法直接删除节点 直接连续删除两个tr节点，会发现第二个无法删除，因为在第一个节点删除后，第二个的tr节点值由原来的n变化为n-1。 <!DOCTYPE html> <html> <head> <meta...
jQuery DOM删除节点操作指南
10-24
本章节主要介绍了jQuery中dom操作的三种删除节点的方法，即remove()，detach()和empty()，并附上示例代码，非常实用，这里推荐给小伙伴们。
jQuery实现删除li节点的方法
10-20
主要介绍了jQuery实现删除li节点的方法的相关资料,需要的朋友可以参考下
jQuery删除当前节点元素
10-20
本文给大家分享一段代码给大家介绍jquery删除当前节点元素的方法，代码简单易懂，非常不错，需要的朋友参考下吧
jQuery之清空节点和移除节点
06-16 625
如果我清空ul的话就是清空ul里面的内容，ul还在如果移除的话，就是把ul标签移除，ul标签不存在。
jq 添加节点和删除节点
lx_1024的博客
04-12 4507
jq 添加节点有四个函数，append，appendTo，prepend，prependTo，下面详细介绍一下1、append是父节点存在，父节点添加子节点，并且是最后一个子节点$('ul').append('&lt;li&gt;1&lt;/li&gt;')2、appendTo是创建一个节点，向已存在的节点追加一个子节点，并且是最后一个节点$('&lt;li&gt;1&lt;/li&gt;').a...
jquery 删除全部子节点
悟世君子的博客
11-29 4769
jquery 获取全部子节点用 children() 方法，删除节点使用remove() 方法 删除全部子节点写法如下 $("#user").children().remove() 示例代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.2.1.min....
用jquery删除一个节点
cultivator129480的博客
03-29 1130
用 $("#idName").remove(); 即可删除id为"idName"的节点,
jquery的三种删除节点的方法
王凯凯凯凯的前端之路
04-14 4844
1、remove() 当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。 2、detach() detach()和remove()一样，也是从DOM中去掉所有匹配的元素。但需要注意的是，这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与re
浅析jQuery删除节点的三个方法
热门推荐
诗意战争
07-20 6万+
jQuery提供了三种删除节点的方法，即remove()，detach()和empty()。 测试所用HTML代码： 你最喜欢的水果是？ 苹果 橘子 菠萝 1、remove()方法 $("ul li").click(function(){ alert($(this).html()); }); var $li = $("ul li:eq(1)").remove(); $li.ap
jQuery_删除及清空节点
Anonymous
01-09 1万+
•remove():从 DOM中删除所有匹配的元素,传入的参数用于根据 jQuery 表达式来筛选元素.  当某个节点用remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用. •empty():清空节点 –清空元素中的所有后代节点(不包含属性节点). Untitled Document
Jquery移除一个节点的下一个节点
qq_25361331的博客
12-10 1007
$('#username').next().remove(); //移除&lt;span&gt;请输入用户名&lt;/span&gt;$('#username').next().hide();   //隐藏&lt;span&gt;请输入用户名&lt;/span&gt;
jQuery删除，添加节点
感恩、奋进、自信
09-17 6319
jQuery删除子节点的方法总结：(用ul中的li作为例子)        1、remove()              $('ul li').remove()：li节点本身及其所有后代节点都被删除；返回值是一个被删除节点的引用，因此可以在以后在次使用这                                               些节点        2、detach()    ...
jquery 删除子节点
最新发布
07-16
下面是一个例子，演示如何使用jQuery删除子节点： ```javascript $(document).ready(function() { // 选择父节点 var parent = $("#parent"); // 删除所有子节点 parent.empty(); }); ``` 在上面的例子中，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值