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 ...
随机推荐
- 验证标题是否存在(TextBox控件失去焦点验证)
首先解释两个属性, AutoPostBack 属性用于设置或返回当用户在 TextBox 控件中按 Enter 或 Tab 键时,是否发生自动回传到服务器的操作. 如果把该属性设置为 TRUE,则启用 ...
- SQL server 表中如何创建索引?
SQL server 表中如何创建索引?看个示例,你就会了 use master goif db_id(N'zhangxu')is not nulldrop database zhangxugocre ...
- Odoo Auto Backup Database And Set Linux task schedualer
First ,Write Database Backup Script: pg_dump -Fc yourdatabasename > /home/yourfilepath/yourdataba ...
- opengl中拾取操作的实现
opengl采用一种比较复杂的方式来实现拾取操作,即选择模式.选择模式是一种绘制模式,它的基本思想是在一次拾取操作时,系统会根据拾取操作的参数(如鼠标位置)生成一个特定视景体,然后又系统重新绘制场景中 ...
- 什么情况下include_path不起作用?
include_path是怎么起作用的? 如果有多个include_path顺序是怎么样的? 什么情况下include_path不起作用? 今天, 我就全面的介绍下这个问题, 先从一个例子开始吧. 如 ...
- MS14-082引起的问题
经常看报道说打了微软的某某补丁出了什么什么问题,但是本人从未亲身经历过,直到MS14-082这个Office补丁的出现,让我也切身体会了一番,有点中奖的感觉. 具体参见: https://suppor ...
- composer autoload
1.引入autoload 文件 include “vendor/autoload.php” 2.自定义的单文件引入 “autoload”:{ "files":["lib/ ...
- Kafka可靠性的思考
首先kafka的throughput 很牛逼,参考:http://engineering.linkedin.com/kafka/benchmarking-apache-kafka-2-million- ...
- IO流学习小结
今天刚刚看完java的io流操作,把主要的脉络看了一遍,不能保证以后使用时都能得心应手,但是最起码用到时知道有这么一个功能可以实现,下面对学习进行一下简单的总结: IO流主要用于硬板.内存.键盘等处理 ...
- Java 基本数据类型转换
1. Integer/int 转 String Integer a = 1; (int a = 1) String b = Integer.toString(a); 2. float 转 Strin ...