jQuery删除/清空指定元素的所有子节点实例代码

前言

我们知道可以利有jQuery中的detach()方法和jQuery中的remove()方法删除指定的或是匹配的元素，也可以使用removeClass()方法以及removeAttr()方法删除指定或是匹配元素的类或是属性。那么我们今天说一说利用jQuery如果删除指定或匹配的元素内的子元素和节点！

jQuery中empty()方法的解释

jQuery中的empty()方法：些方法可以清空/删除指定元素下的所以子节点或是内容

语法：

$(selector).empty()

举个大大的“例”字

利用jQuery中的empty()方法移去DIV中的所有内容

HTML代码

<div id="mochu">
  <p>这里是P标签内容</p>
  <p>这里是第二个P标签的内容</p>
</div>

JQ代码

$('#button').click(function(){
  $("#mochu").empty();
})

结果图示

审核源码如下图所示

通过上图我们可以发现，ID为mochu的div标签，里面的P标签和内容都已被删除！

作者有话说

写这篇文章的时候，查阅了三个文档，其中一个文档这样说的，empty()函数应理解为清空指定元素下的子节点，并不是删除指定元素下的子节点。关于这一点，大家看着理解吧。我个人认为，还是清空比较恰当一些！

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • jquery 取子节点及当前节点属性值的方法

    分享下jquery取子节点及当前节点属性值的方法. <li class="menulink"> <a href="#" rel="external nofollow" id="101" onclick="changeMenu('101','资料管理','#' )"><span>资料管理</span> </a> </li> 取子节点: $

  • jquery 取子节点及当前节点属性值

    <li class="menulink"> <a href="#" rel="external nofollow" id="101" onclick="changeMenu('101','资料管理','#' )"><span>资料管理</span> </a> </li> 取子节点: $(".menulink a").

  • jQuery插件zTree实现清空选中第一个节点所有子节点的方法

    jQuery插件zTree实现清空选中第一个节点所有子节点的方法

    本文实例讲述了jQuery插件zTree实现清空选中第一个节点所有子节点的方法.分享给大家供大家参考,具体如下: 1.实现代码: <!DOCTYPE html> <html> <head> <title>zTree实现基本树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link r

  • jQuery获取节点和子节点文本的方法

    对于下面的html片段, <div id="text_test">test text<a href="techbrood.com" rel="external nofollow" >techbrood co.</a></div> 获取节点纯文本: var text = $('#text_test').text() 这个会得到"test text techbrood co.",也就

  • jQuery循环遍历子节点并获取值的方法

    本文实例讲述了jQuery循环遍历子节点并获取值的方法.分享给大家供大家参考,具体如下: Html代码部分: <div class="left_tree_ad_btn_container"> <ul> <li class="tree_ad_btn_bg"><img src="/images/insurance/3lianad_small.jpg" /> </li> </ul>

  • jquery的父、子、兄弟节点查找,节点的子节点循环方法

    jQuery.parent(expr)           //找父元素 jQuery.parents(expr)          //找到所有祖先元素,不限于父元素 jQuery.children(expr)        //查找所有子元素,只会找到直接的孩子节点,不会返回所有子孙 jQuery.contents()            //查找下面的所有内容,包括节点和文本. jQuery.prev()                //查找上一个兄弟节点,不是所有的兄弟节点 jQue

  • jquery获取子节点和父节点的示例代码

    一.获取子节点 比如是一个 id 为 test 的 div元素,我们这样选中,$('#test'),我们要查找这个div下的一个class为demo的span元素,有一下几种方法 1.使用筛选条件 $('#test span.demo') 2.使用find()函数 $('#test').find('span.demo') 3.使用children()函数 $('#test').children('span.demo') 二.获取父节点 jquery获取父元素方法比较多,比如parent(),pa

  • jquery实现点击TreeView文本父节点展开/折叠子节点

    jquery实现点击TreeView文本父节点展开/折叠子节点

    以前一个现在不用的帐号发布的随笔,现在人肉搬过来吧. 注册用户有一段时间了,一直很忙,到现在还没有写一篇,忽然觉的一定要花点时间记录和总结一些东西.好吧,就从这里开始了. 今天客户提出要点击菜单(TreeView实现的)的父级节点时,展开节点.心想这个应该是很常见的功能吧,特意google了一下,发现大部分是将的不是js实现的,有些js实现的写的麻烦,干脆自己写一个吧,应该不难的. 首先思路是,,让文本点击的时候执行左边'+'号的事件,查看源码看到,'+'号的事件是: javascript:Tr

  • jQuery插件zTree实现删除树子节点的方法示例

    jQuery插件zTree实现删除树子节点的方法示例

    本文实例讲述了jQuery插件zTree实现删除树子节点的方法.分享给大家供大家参考,具体如下: 1.实现代码: <!DOCTYPE html> <html> <head> <title>zTree实现基本树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="

  • jQuery删除/清空指定元素的所有子节点实例代码

    jQuery删除/清空指定元素的所有子节点实例代码

    前言 我们知道可以利有jQuery中的detach()方法和jQuery中的remove()方法删除指定的或是匹配的元素,也可以使用removeClass()方法以及removeAttr()方法删除指定或是匹配元素的类或是属性.那么我们今天说一说利用jQuery如果删除指定或匹配的元素内的子元素和节点! jQuery中empty()方法的解释 jQuery中的empty()方法:些方法可以清空/删除指定元素下的所以子节点或是内容 语法: $(selector).empty() 举个大大的"例&q

  • php删除数组指定元素实现代码

    php删除数组指定元素实现代码 在PHP中删除数组指定元素的函数没有直接能使用的,多数只能封装方法 例如array_slice() 函数在数组中根据条件取出一段值,并返回. array_slice(array,offset,length,preserve) array:数组 offset: 规定取出元素的开始位置.如果是正数,则从前往后开始取,如果是负值,从后向前取 offset 绝对值. <?php $a=array(0=>"Dog",1=>"Cat&qu

  • jquery删除指定子元素代码实例

    jquery删除指定子元素代码实例: 本章节介绍一下如何利用jQuery实现删除指定子元素. 如何利用原生javascript实现此功能可以参阅原生javascript删除指定子元素代码实例一章节. 其实实现此功能的方式有很多种,下面介绍一下其中比较常见的一种. 代码实例如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <meta charset="utf-8"> <title>我们</title>

  • python 列表删除所有指定元素的方法

    如下所示: a = [1,1,1,2,3,45,1,2,1] a.remove(1) result: [1,1,2,3,45,1,2,1] while 1 in a: a.remove(1) result: [2,3,45,2] 以上这篇python 列表删除所有指定元素的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Python列表删除的三种方法代码分享 Python实现删除列表中满足一定条件的元素示例 Python实现判断并移除列表

  • Vue+jquery实现表格指定列的文字收缩的示例代码

    Vue+jquery实现表格指定列的文字收缩的示例代码

    本文介绍了Vue+jquery实现表格指定列的文字收缩的示例代码,分享给大家,具体如下: 效果很简单,但是写起来真的不容易,因为Vue对于没有React这种前端框架经验的人是不友好的 (少吐槽,多工作,省下时间出去hi) 先说一下我走过的弯路:我之间想通过 v-if 指令去操作这一列 代码是这样的: <el-table-column width="250" align="center" label="比较基准"> <templa

  • jquery设置表单元素为不可用的简单代码

    本章节通过简单的实例代码介绍一下如何将表单元素设置为不可用状态. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>我们</title> <script type=

  • jQuery实现下拉框多选 jquery-multiselect 的实例代码

    jQuery实现下拉框多选 jquery-multiselect 的实例代码

    先给大家展示下效果图: 除了jquery,需要引用的样式和js文件: <link rel="stylesheet" type="text/css" href="../assets/jquery.multiselect.css" /> <link rel="stylesheet" type="text/css" href="../assets/style.css" /&g

  • jQuery Ajax向服务端传递数组参数值的实例代码

    jQuery Ajax向服务端传递数组参数值的实例代码

    在使用MVC时,向服务器端发送POST请求时有时需要传递数组作为参数值 下面使用例子说明,首先看一下Action [HttpPost] public ActionResult Test(List<string> model) { return Json(null, JsonRequestBehavior.AllowGet); } 方式一,构造表单元素,然后调用serialize()方法得到构造参数字符串 @{ Layout = null; } <!DOCTYPE html> <

  • jQuery实现可编辑表格并生成json结果(实例代码)

    jQuery实现可编辑表格并生成json结果(实例代码)

    实现效果如下,在编辑表格的同时可以实现字段json内容的自动变化,点击提交可以保存到后台,页面加载的时候自动解析json并加载表格内容.该代码解析和加载功能都用前端js实现,简化了后台代码逻辑. 定义要操作的表格头: <input readonly="readonly" class="form-control" type="text" id="scorerange" value="" name=&qu

  • 基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码

    1.   测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-dist win7 1.2.   实践 HTML代码片段 <div class="container-fluid"> <div class="row"> <!--添加左侧菜单栏 --> <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> <div class

随机推荐