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. springmvc快速入门（注解版本）

    1)springmvc快速入门(传统版) 步一:创建springmvc-day02这么一个web应用 步二:导入springioc,springweb和springmvc相关的jar包 ------- ...

  2. How to remove duplicate lines in a large text file?

    How would you remove duplicate lines from a file that is  much too large to fit in memory? The dupli ...

  3. robotframework 接口测试 +RSA 加密

    首先,实现RSA加密,需要用到pycrypto这个库,这个库又依赖openssl,所以需要先下载openssl,具体教程可以参考http://bbs.csdn.net/topics/392193545 ...

  4. Golang的goroutine协程和channel通道

    一:简介 因为并发程序要考虑很多的细节,以保证对共享变量的正确访问,使得并发编程在很多情况下变得很复杂.但是Go语言在开发并发时,是比较简洁的.它通过channel来传递数据.数据竞争这个问题在gol ...

  5. 写linux脚本你怎么能不知道位置参数！？

    在写shell脚本的时候,我们经常会手动设置参数,然后对我们的输入的这些参数进行处理和分析,那么这个东东到底值怎么使用的呢? 1.$n $0代表命令本身,$1-9代表接受的第1-9个参数,10以上需要 ...

  6. java8函数式接口(Functional Interface)

    介绍 函数式接口(Functional Interface)就是一个有且仅有一个抽象方法,但是可以有多个非抽象方法的接口. 函数式接口可以被隐式转换为 lambda 表达式(箭头函数). 函数式接口代 ...

  7. B-tree 和 B+tree过程

    https://blog.csdn.net/baiyan3212/article/details/91043695 https://www.jianshu.com/p/0371c9569736

  8. 21.根据hive绑定数据统计计算保存到hive表中

    创建upflow表 create external table mydb2.upflow (ip string,sum string) row format delimited fields term ...

  9. WijmoJS 中自定义 React 菜单和列表项模板

    WijmoJS 中自定义 React 菜单和列表项模板 在V2019.0 Update2 的全新版本中,React 框架下 WijmoJS 的前端UI组件功能再度增强. WijmoJS的菜单和类似列表 ...

  10. 关于tk.mybatis.spring.mapper.SpringBootBindUtil$SpringBoot2Bind.bind(SpringBootBindUtil.java:129) ~[mapper-spring-boot-autoconfigure-1.2.3.jar:na]的问题

    错误如下: java.lang.RuntimeException: java.lang.reflect.InvocationTargetException at tk.mybatis.spring.m ...