jQuery 学习6 删除元素

 
上节课我们做了添加元素，模拟的是楼主发的文章，路人评论，那么同学们这节课学了删除之后，去之前的代码上添加一个删除，模拟一个楼主删除路人的评论。
jQuery的删除方法：
  • remove() - 删除被选元素（及其子元素）
  • empty() - 从被选元素中删除子元素

以上引用w3c教程

 
为了同学们更好的扩展，老师就不在上节课的基础上模拟删除，而是写出删除的功能代码和注意事项，同学们就自己多尝试，来瞧瞧代码先：
 
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>jQuery 学习6 删除元素</title>

    <!--使用jQuery一定不要忘记引用jQuery文件-->

    <script src="../js/jquery-1.12.2.min.js"></script>

</head>

<body>

<div class="div">

    我是第一个div元素

    <span>第一个div里面的span元素</span>

</div>

<div>

    我是第二个div哟

    <b>第二个div下面的b元素</b>

    <span>第二个div下面的span元素</span>

</div>

<div class="div">我是第三个div</div>

<!--以上给出三个div测试效果-->

<br/>

<!--给三个按钮事件-->

<button onclick="shanchu1()">删除div</button>

<button onclick="shanchu2()">过滤删除div里class="div"的</button>

<button onclick="shanchu3()">删除div里的子元素</button>

<script>

    //shanchu1事件，删除所有div元素

    function shanchu1(){

        $("div").remove();

        //remove()删除方法

    }

    //shanchu2事件，删除div里，只有class="div" 的元素

    function shanchu2(){

        $("div").remove('.div');

        //只会删除div元素里面带有class并且值等于div的元素

    }

    //shanchu3事件，删除div里面的所有子元素

    function shanchu3(){

        $("div").empty();

        //删除被选元素下的所有子元素(包括内容)

    }

</script>

</body>

</html>
 
以上，我们在页面，打开检查代码，可以看到，执行shanchu1事件，所有div都被删除，同学们注意，这里是删除，并非隐藏，检查代码里的div也就消失了，而不是添加display属性隐藏哦。
remove()删除方法，它还可以带一个参数，就是过滤条件，在div元素里过滤，过滤条件是class="div"，所以我们在remove的括号里，带一个参数，写法和前的$("")是一样的，也就是找到，指定的意思，那么我们调用shanchu2事件，可以看到，只有第一个和第三个div被删除，因为过滤条件指向了它们。
shanchu3事件，里面用的是empty()方法，它也是删除，但不是删除此元素，而是删除此元素下面的所有元素，包括内容。所以我们检查源码会发现，三个div依旧存在，不过内容、元素等都被删除了。
 
本节课学的删除操作很简单，难点在于扩展，就看同学们在实战中，能否合理运用。
 

第二十四篇 jQuery 学习6 删除元素的更多相关文章

  1. 第二十五篇 jQuery 学习7 获取并设置 CSS 类

    jQuery 学习7 获取并设置 CSS 类   jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...

  2. 第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素

    jQuery 学习8 遍历-父亲兄弟子孙元素   jQuery遍历,可以理解为“移动”,使用“移动”还获取其他的元素.   什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师 ...

  3. 第二十二篇 jQuery 学习4 内容和属性

    jQuery 内容和属性   这节课,我们学习使用jQuery来控制元素的内容.值和属性.   html() 控制所选元素的内容(包括HTML标记): text() 控制所选元素的内容: val() ...

  4. 第二十四篇 -- Cache学习

    Cache存储器 电脑中为高速缓冲存储器,是位于CPU和主存储器DRAM(Dynamic Random Access Memory)之间,规模较小,但速度很高的存储器,通常由SRAM(Static R ...

  5. SpringBoot第二十四篇：应用监控之Admin

    作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11457867.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言   前一章(S ...

  6. Python之路【第二十四篇】：Python学习路径及练手项目合集

      Python学习路径及练手项目合集 Wayne Shi· 2 个月前 参照:https://zhuanlan.zhihu.com/p/23561159 更多文章欢迎关注专栏:学习编程. 本系列Py ...

  7. Android UI开发第二十四篇——Action Bar

    Action bar是一个标识应用程序和用户位置的窗口功能,并且给用户提供操作和导航模式.在大多数的情况下,当你需要突出展现用户行为或全局导航的activity中使用action bar,因为acti ...

  8. 【Python之路】第十四篇--jQuery

    jquery简介 1.jquery是什么       ☛ 参考用法 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery ...

  9. 【转】Android UI开发第二十四篇——Action Bar

    Action bar是一个标识应用程序和用户位置的窗口功能,并且给用户提供操作和导航模式.在大多数的情况下,当你需要突出展现用户行为或全局导航的activity中使用action bar,因为acti ...

随机推荐

  1. linux 下执行py问题提示cannot import name request

    最近因为工作需要,需要在linux上去执行python代码,但是在执行的时候提示cannot import name request,我以为是导入有问题,然后我就把代码放到与包一个目录下,执行py问题 ...

  2. Python2.7 threading模块学习

    主要学习一下python的多线程编程,使用threading模块,threading 包括:Thread.conditions.event.rlock.semaphore等类. Thread对象可以实 ...

  3. Performance Analysis of Logs (PAL) Tool

    Performance Analysis of Logs (PAL) Tool 背景 在众多的独立项目中,我们如何快速了解数据库(SQL Server)服务器的性能,以及数据库的基线情况是怎样的,或者 ...

  4. 手写web框架之实现Bean容器

    实现Bean容器    使用ClassHelper可以获取所加载的类,但无法通过类来实例化对象,因此我们需要提供一个反射工具类,让它封装java反射相关的API,对外提供更好用的工具方法.将该类命名为 ...

  5. 【转载】oracle中decode函数用法

    1.DECODE的语法:DECODE(value,if1,then1,if2,then2,if3,then3,...,else).表示假设value 等于if1时,DECODE函数的结果返回then1 ...

  6. 在java中有关于反射的皮毛----自己的简略认知

    白首为功名.旧山松竹老,阻归程.欲将心事付瑶琴.知音少,弦断有谁听? 反射(reflection): 当我们在看到这个名词首先会想到的是,我们在上高中时学的物理,那么在java开发中,反射这个名词是怎 ...

  7. Vue开发工具

    vue微信小程序:mpvue 极客开发工具:Dcloud,uni-app 一套代码多终端. 简书-推荐的Vue UI库 Vue UI: 功能介绍帖子之一  :帖子二 VSCode: 介绍帖子 Vue- ...

  8. vue计算属性VS侦听属性

    原文地址 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 Angular ...

  9. django 之(一) --- DjangoRestFormwork

    接口概念 IOP:面向接口编程,不再关注具体的实现:只关注输入.输出. http://www.ruanyifeng.com/blog/2018/10/restful-api-best-practice ...

  10. Int8，Int16，Int32，Int64 有啥不同呢？看了立马就懂！

    大家有没有写了很久代码,还不知道这个Int8,Int16, Int32, Int64有什么区别呢?或者是为什么后面的数字不一样呢? 初步了解了一下,才清楚这个东西. 先来扫盲一下计算机存储单元, 在计 ...