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. 8．按要求编写Java应用程序。 （1）建立一个名叫Cat的类： 属性：姓名、毛色、年龄 行为：显示姓名、喊叫 （2）编写主类： 创建一个对象猫，姓名为“妮妮”，毛色为“灰色”，年龄为2岁，在屏幕上输 出该对象的毛色和年龄，让该对象调用显示姓名和喊叫两个方法。

    package liu0917; public class Cat { String name="妮妮"; int age=2; String maose="灰色&quo ...

  2. DataGridView控件添加数据时空白的可 错误情况

    写一个小程序,将数据库中的两张表相关信息显示在DataGridView中.代码如下: //获取项目数据,添加到表中 SqlConnection con = new SqlConnection(Main ...

  3. opengl中拾取操作的实现

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

  4. html5文章 -- HTML5开发实例-网易微博手机Web App开发过程

    HTML5在国内外越来越受到互联网开发团队的青睐.国外,谷歌兴致勃勃地开发Chrome Web Store,微软发布了支持使用HTML5技术开发的“Irish Spring”主题网站,诺基亚斥巨资购得 ...

  5. JQuery的定义

    JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera ...

  6. SqlServer表数据与excel中数据的互相复制

    一.SqlServer表数据复制到excel 1.新建查询,用sql语句把表数据读出来 2.然后,选择数据,右键,复制(也可以点击连同标题复制),复制到记事本中(不然会乱码) 3.然后再把记事本的内容 ...

  7. PHP 错误与异常 笔记与总结（8）自定义错误处理函数 set_error_handler()

    通过 Set_error_handler() 函数设置用户自定义的错误处理函数. 步骤: ① 创建错误处理函数 ② 设置不同级别调用函数 ③ Set_error_handler() 函数制定接管错误处 ...

  8. Google Chrome can not be run as root

    Ubuntu运行Chrome出现"Google Chrome can not be run as root"的解决方法 编辑启动文件:/opt/google/chrome/goog ...

  9. eclipse不正常编译导致错误:Access denied for user 'root'@'localhost' (using password: YES)

    使用eclipse连接mysql报错:Access denied for user 'root'@'localhost' (using password: YES) 连接代码没有任何问题,网上找了很多 ...

  10. 泌尿系统 Excretory system

    https://zh.wikipedia.org/wiki/泌尿系统 泌尿系統,有時也歸類於排泄系統(Excretory system)的一部分,負責尿液的產生.運送.儲存與排泄.人類的泌尿系統包括左 ...