JQuery:删除元素
通过 jQuery，可以很容易地删除已有的 HTML 元素、删除元素/内容。
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
 remove() - 删除被选元素（及其子元素）
 empty()  - 从被选元素中删除子元素
1、jQuery remove() 方法
　  jQuery remove() 方法删除被选元素及其子元素。
     实例：$("#div1").remove();
代码如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>JQuery的使用！！！</title>
  6.     <script src="jquery-3.1.0.js"></script>
  7.     <script>
  8.         $(document).ready(function(){
  9.             //删除div元素
  10.             $("button").click(function(){
  11.                 $("#div").remove();
  12.             });
  13.         });
  14.     </script>
  15. </head>
  16. <body>
  17.     <div id="div" style="width:200px;height:100px;background-color:yellow;border:1px solid;text-align:center">
  18.         这是div中的一些文本
  19.         <p>这是div中一行段落</p>
  20.         <p>这是div中另一行段落</p>
  21.     </div><br>
  22.     <button>删除div元素</button>
  23. </body>
  24. </html>

 

2、jQuery empty() 方法
     jQuery empty() 方法删除被选元素的子元素。
     实例：$("#div1").empty();
代码如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>JQuery的使用！！！</title>
  6.     <script src="jquery-3.1.0.js"></script>
  7.     <script>
  8.         $(document).ready(function(){
  9.             //清空div元素
  10.             $("button").click(function(){
  11.                 $("#div").empty();
  12.             });
  13.         });
  14.     </script>
  15. </head>
  16. <body>
  17.     <div id="div" style="width:200px;height:100px;background-color:yellow;border:1px solid;text-align:center">
  18.         这是div中的一些文本
  19.         <p>这是div中一行段落</p>
  20.         <p>这是div中另一行段落</p>
  21.     </div><br>
  22.     <button>清空div元素</button>
  23. </body>
  24. </html>

 

3、过滤被删除的元素
    jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
    该参数可以是任何 jQuery 选择器的语法。
    下面的例子删除 class="italic" 的所有 <p> 元素：
实例：$("p").remove(".italic");
代码如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>JQuery的使用！！！</title>
  6.     <script src="jquery-3.1.0.js"></script>
  7.     <script>
  8.         $(document).ready(function(){
  9.             //移除所有class="italic"的p元素
  10.             $("button").click(function(){
  11.                 $("p").remove(".italic");
  12.             });
  13.         });
  14.     </script>
  15. </head>
  16. <body>
  17.     <div id="div" style="width:200px;height:100px;background-color:yellow;border:1px solid;text-align:center">
  18.         这是div中的一些文本
  19.         <p class="italic">这是div中一行段落</p>
  20.         <p class="italic">这是div中另一行段落</p>
  21.     </div><br>
  22.     <button>移除所有class="italic"的p元素</button>
  23. </body>
  24. </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. C Memory Layout C语言中的内存布局

    在C语言中,内存的主要分为下列几部分: 1. Text/Code Segment 文本/代码区 2. Initialized Data Segments 初始化的数据区 3. Uninitialize ...

  2. Linux环境下实现哲学家就餐问题

    #include <stdio.h> #include <stdlib.h> #include <memory.h> #include <pthread.h& ...

  3. HTML5 挖宝

    http://geek.csdn.net/news/detail/91536 http://mozilla.com.cn/thread-360325-1-1.html

  4. SonarQube代码质量管理平台安装与使用

    Sonar简介 Sonar是一个用于代码质量管理的开源平台,用于管理源代码的质量,可以从七个维度检测代码质量 通过插件形式,可以支持包括java,C#,C/C++,PL/SQL,Cobol,JavaS ...

  5. Scrum会议10(Beta版本) 补交

    组名:天天向上 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git.coding.n ...

  6. 2.PHP内核探索：一次请求的开始与结束

    PHP开始执行以后会经过两个主要的阶段: 处理请求之前的开始阶段 请求之后的结束阶段 开始阶段有两个过程: 第一个过程是模块初始化阶段(MINIT), 在整个SAPI生命周期内(例如Apache启动以 ...

  7. JS中基本window.document对象操作以及常用事件！

    一.找到元素 1.document.getELementById("id"):根据id找,最多找一个. var a=document.getELementById("id ...

  8. 【php学习】字符串操作

    关于字符串的处理,基本上就是那几种操作:字符串长度.查找子字符串的位置.替换字符串.截取字符串.拆分合并字符串 ... 字符串的定义:直接 $str = "abcd"; 或者 $s ...

  9. error: jump to label ‘XXXX’ [-fpermissive]

    http://www.cnblogs.com/foohack/p/4090124.html 下面的类似的源码在MSVC上能正确编译通过.但是gcc/g++上就会错: 1. if(expr)2. got ...

  10. Bootstrap 巨幕页头缩略图和警告框组件

    一．巨幕组件 //在固定的范围内,有圆角 <div class="container"> <div class="jumbotron"> ...