JQuery:JQuery删除元素
JQuery:删除元素
通过 jQuery,可以很容易地删除已有的 HTML 元素、删除元素/内容。
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
1、jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素。
实例:$("#div1").remove();
代码如下:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>JQuery的使用!!!</title>
<script src="jquery-3.1.0.js"></script>
<script>
$(document).ready(function(){
//删除div元素
$("button").click(function(){
$("#div").remove();
});
});
</script>
</head>
<body>
<div id="div" style="width:200px;height:100px;background-color:yellow;border:1px solid;text-align:center">
这是div中的一些文本
<p>这是div中一行段落</p>
<p>这是div中另一行段落</p>
</div><br>
<button>删除div元素</button>
</body>
</html>
2、jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素。
实例:$("#div1").empty();
代码如下:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>JQuery的使用!!!</title>
<script src="jquery-3.1.0.js"></script>
<script>
$(document).ready(function(){
//清空div元素
$("button").click(function(){
$("#div").empty();
});
});
</script>
</head>
<body>
<div id="div" style="width:200px;height:100px;background-color:yellow;border:1px solid;text-align:center">
这是div中的一些文本
<p>这是div中一行段落</p>
<p>这是div中另一行段落</p>
</div><br>
<button>清空div元素</button>
</body>
</html>
3、过滤被删除的元素
jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素:
实例:$("p").remove(".italic");
代码如下:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>JQuery的使用!!!</title>
<script src="jquery-3.1.0.js"></script>
<script>
$(document).ready(function(){
//移除所有class="italic"的p元素
$("button").click(function(){
$("p").remove(".italic");
});
});
</script>
</head>
<body>
<div id="div" style="width:200px;height:100px;background-color:yellow;border:1px solid;text-align:center">
这是div中的一些文本
<p class="italic">这是div中一行段落</p>
<p class="italic">这是div中另一行段落</p>
</div><br>
<button>移除所有class="italic"的p元素</button>
</body>
</html>
JQuery:JQuery删除元素的更多相关文章
- jQuery添加删除元素
$(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...
- Jquery中删除元素方法
empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除 语法: empty() remove(expr); empty用来删除指定元素的子元素,remove用来删除元素 ...
- 分别使用原生js和jQuery添加/删除元素的class属性
一.原生js添加/删除元素的class属性: <!-- span元素原有class = "test" --> <span class="test&quo ...
- jquery操作删除元素
通过 jQuery,可以很容易地删除已有的 HTML 元素. 删除元素/内容 如需删除元素和内容,一般可使用以下两个 jQuery 方法: remove() - 删除被选元素(及其子元素) empty ...
- jQuery添加/删除元素
jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容(仍然该元素的内部). 追加前:<p>这是一个文本段落</p> $(" ...
- jquery数组删除指定元素的方法:grep()
jquery数组删除指定元素的方法:grep() 金刚 数组 jquery javascript 元素 遇到的问题 今天遇到一个问题,删除数组中的一个指定元素,并返回新的数组. 我定义的js数组是这样 ...
- JQUERY添加、删除元素、eq()方法;
一.jQuery - 添加元素 1.append() - 在被选元素内部的结尾插入指定内容 2.prepend() - 在被选元素内部的开头插入指定内容 3.after() - 在被选元素之后插入内容 ...
- jQuery 添加元素和删除元素
jQuery - 添加元素 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元 ...
- JavaScript(20)jQuery HTML 加入和删除元素
jQuery - 加入元素 通过 jQuery,能够非常easy地加入新元素/内容. 加入新的 HTML 内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepen ...
随机推荐
- 查看GCC编译C的中间代码
小测试,记录一下命令 XD 一.C程序源码(code.c): 二.中间代码 由 gcc -fdump-tree-all code.c 得到 查看 code.c.012t.cfg 三.汇编级代码 (64 ...
- 《Lucene实战(第2版)》 配书代码在IDEA下的编译方法
参考: hankcs http://www.hankcs.com/program/java/lucene-combat-2nd-edition-book-with-code-compiled-unde ...
- SQLHelper 简介
什么是SQLHelper SqlHelper是一个基于.NETFramework的数据库操作组件.组件中包含数据库操作方法,目前SqlHelper有很多版本,主要以微软一开始发布的SqlHelper类 ...
- 释放用完的Excel COM组件
How to Open; SaveAs; then Close an Excel 2013 (macro-enabled) workbook from PowerShell4 1. (http:/ ...
- C++四种强转
C++风格的类型转换提供了4种类型转换操作符来应对不同场合的应用. const_cast,字面上理解就是去const属性. static_cast,命名上理解是静态类型转换.如int转换成char. ...
- IP_TOS选项
voip IP_tos 选项 在IP头中,有一Type-of-Service字段,该字段描述了IP包的优先级和QoS选项,使用IP_TOS可以来设定该字段的值,以区分不同服务的优先级,Linux 中可 ...
- visual 2008中error PRJ0003 : 生成 cmd.exe 时出错
visual 2008中error PRJ0003 : 生成 cmd.exe 时出错”, 和vs2008 sp1没关系 解决方案:工具—>选项—>项目和解决方案—>VC++目录, ...
- Virtualbox虚拟Ubuntu共享文件夹设置
1. 启动ubuntu, 然后先virtualbox的安装增强功能,菜单:“设备(D)”-> "安装增强功能":然后进入ubuntu 系统,安装Vboxadditions_. ...
- [SHELL进阶] (转)最牛B的 Linux Shell 命令 (四)
1.查看ASCII码表 man 7 ascii 很多人初学编程都会接触到ascii码的概念,有时候为了查某个符号的ascii值,可能还得翻箱倒柜找出当年的课本?Linux Manpage里面其实包含 ...
- Partitioning
COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION The simplest scheme f ...