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. hdu 猜数字

    这题的意思是找到最大的n使得m次之内的猜测可以猜到1~n之间的任何值.这里是二分思想的逆过程,1~h个数最多猜测log2(n+1)次(n为奇数),故 n=2^m-1; #include"io ...

  2. Windows下PHPUnit安装

    收藏的介绍地址 1.手动方式安装示例:http://blog.sina.com.cn/s/blog_5d3dc0110100ghlo.html2.通过Pear安装示例:blog.sina.com.cn ...

  3. Scrum会议3

    组名称:天天向上 项目名称:连连看 参会成员:王森(Master)张金生 张政 栾骄阳 时间:2016.10.18 已完成内容: 1.GUI布局设计 2.通过在网上大量阅览代码,大体了解连连看游戏制作 ...

  4. HDU 3639 Bone Collector II（01背包第K优解）

    Bone Collector II Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  5. Go语言学习资源

    Go语言学习资源 下载:http://www.golangtc.com/downloadhttp://www.golangtc.com/download/liteide 安装及开发工具http://j ...

  6. MyBatis+springMVC+easyUI (dataGirl)实现分页

    页面展示效果. 页面代码: <%@ page contentType="text/html;charset=UTF-8" language="java"  ...

  7. Converting from Decimal Notation to Binary Notation for Fractions

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION Therefore, the conver ...

  8. 下面我会介绍几种轻轻松松访问Google的方法

    好人一生平安的大招 Google在大陆已经封了差不多有20天   访问是极其的困难 下面我会介绍几种轻轻松松访问Google的方法 首先 你需要个可靠的hosts  比如 https://git.os ...

  9. svn 入门

    SVN版本:1.5 及更新版本 名词说明: WC:Working Copy 你的工作区 Versioned:受控的:受版本控制的 SVN是什么? SVN是开源的版本控制系统. 比CVS更多的特性.一个 ...

  10. 地图API使用文档-以腾讯地图为例

    目录 腾讯地图API 2 1.API概览... 2 1.1 WebService API(官网注明是beta版本,可能不稳定,慎用):... 2 1.2 URL API:... 2 1.3 静态图AP ...