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. ScreenShot 截图工具类

    import android.app.Activity; import android.graphics.Bitmap; import android.graphics.Rect; import an ...

  2. Module ngx_http_rewrite_module

    http://nginx.org/en/docs/http/ngx_http_rewrite_module.html Directives     break     if     return    ...

  3. Linux命令对应的英文全称【转载】

    su:Swith user  切换用户,切换到root用户cat: Concatenate  串联uname: Unix name  系统名称df: Disk free  空余硬盘du: Disk u ...

  4. powerdesigner通过er图生成mysql执行文件

    PowerDesigner是一款功能非常强大的建模工具软件,足以与Rose比肩,同样是当今最著名的建模软件之一.Rose是专攻UML对象模型的建模工具,之后才向数据库建模发展,而PowerDesign ...

  5. MMORPG服务器架构

    MMORPG服务器架构 一.摘要 1.网络游戏MMORPG整体服务器框架,包括早期,中期,当前的一些主流架构2.网络游戏网络层,包括网络协议,IO模型,网络框架,消息编码等.3.网络游戏的场景管理,A ...

  6. c++ 调试信息输出

    1. 把打印信息输出到指定的文件里. #include <stdio.h> #include <stdlib.h> freopen("log.txt", & ...

  7. 【网易微专业】图表绘制工具Matplotlib

    01 与图片的交互方式设置 这一小节简要介绍一下Matplotlib的交互方式 import pandas as pd import numpy as np import matplotlib.pyp ...

  8. LeetCode.1207-唯一的元素出现次数(Unique Number of Occurrences)

    这是小川的第次更新,第篇原创 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第269题(顺位题号是1207).给定一个整数数组arr,当且仅当该数组中每个元素的出现次数唯一时,返回tr ...

  9. server 2008 R2 DHCP服务器部署

    安装DHCP服务器 和上一篇文章中安装IIS 7.0一样,我们在安装DHCP服务器的时候也要用到Windows Server 2008的服务器安装器. 首先打开服务器管理器,点击开始菜单——>管 ...

  10. C学习笔记-字符串

    对于C语言来说,字符串其实就是最后一个元素为'\0'的char数组 字符数组的初始化 字符数组常见的有两种初始化方式 char str[] = "hello"; 或者 char s ...