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删除元素的更多相关文章

  1. jQuery添加删除元素

    $(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...

  2. Jquery中删除元素方法

    empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除 语法: empty() remove(expr); empty用来删除指定元素的子元素,remove用来删除元素 ...

  3. 分别使用原生js和jQuery添加/删除元素的class属性

    一.原生js添加/删除元素的class属性: <!-- span元素原有class = "test" --> <span class="test&quo ...

  4. jquery操作删除元素

    通过 jQuery,可以很容易地删除已有的 HTML 元素. 删除元素/内容 如需删除元素和内容,一般可使用以下两个 jQuery 方法: remove() - 删除被选元素(及其子元素) empty ...

  5. jQuery添加/删除元素

    jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容(仍然该元素的内部). 追加前:<p>这是一个文本段落</p> $(" ...

  6. jquery数组删除指定元素的方法:grep()

    jquery数组删除指定元素的方法:grep() 金刚 数组 jquery javascript 元素 遇到的问题 今天遇到一个问题,删除数组中的一个指定元素,并返回新的数组. 我定义的js数组是这样 ...

  7. JQUERY添加、删除元素、eq()方法;

    一.jQuery - 添加元素 1.append() - 在被选元素内部的结尾插入指定内容 2.prepend() - 在被选元素内部的开头插入指定内容 3.after() - 在被选元素之后插入内容 ...

  8. jQuery 添加元素和删除元素

    jQuery - 添加元素 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元 ...

  9. JavaScript(20)jQuery HTML 加入和删除元素

    jQuery - 加入元素 通过 jQuery,能够非常easy地加入新元素/内容. 加入新的 HTML 内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepen ...

随机推荐

  1. 验证标题是否存在(TextBox控件失去焦点验证)

    首先解释两个属性, AutoPostBack 属性用于设置或返回当用户在 TextBox 控件中按 Enter 或 Tab 键时,是否发生自动回传到服务器的操作. 如果把该属性设置为 TRUE,则启用 ...

  2. SQL server 表中如何创建索引?

    SQL server 表中如何创建索引?看个示例,你就会了 use master goif db_id(N'zhangxu')is not nulldrop database zhangxugocre ...

  3. Odoo Auto Backup Database And Set Linux task schedualer

    First ,Write Database Backup Script: pg_dump -Fc yourdatabasename > /home/yourfilepath/yourdataba ...

  4. opengl中拾取操作的实现

    opengl采用一种比较复杂的方式来实现拾取操作,即选择模式.选择模式是一种绘制模式,它的基本思想是在一次拾取操作时,系统会根据拾取操作的参数(如鼠标位置)生成一个特定视景体,然后又系统重新绘制场景中 ...

  5. 什么情况下include_path不起作用?

    include_path是怎么起作用的? 如果有多个include_path顺序是怎么样的? 什么情况下include_path不起作用? 今天, 我就全面的介绍下这个问题, 先从一个例子开始吧. 如 ...

  6. MS14-082引起的问题

    经常看报道说打了微软的某某补丁出了什么什么问题,但是本人从未亲身经历过,直到MS14-082这个Office补丁的出现,让我也切身体会了一番,有点中奖的感觉. 具体参见: https://suppor ...

  7. composer autoload

    1.引入autoload 文件 include “vendor/autoload.php” 2.自定义的单文件引入 “autoload”:{ "files":["lib/ ...

  8. Kafka可靠性的思考

    首先kafka的throughput 很牛逼,参考:http://engineering.linkedin.com/kafka/benchmarking-apache-kafka-2-million- ...

  9. IO流学习小结

    今天刚刚看完java的io流操作,把主要的脉络看了一遍,不能保证以后使用时都能得心应手,但是最起码用到时知道有这么一个功能可以实现,下面对学习进行一下简单的总结: IO流主要用于硬板.内存.键盘等处理 ...

  10. Java 基本数据类型转换

    1. Integer/int  转 String Integer a = 1; (int a = 1) String b = Integer.toString(a); 2. float 转 Strin ...