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. java截取图片部分尺寸

    package util; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io.File; i ...

  2. Solve error: Cannot open include file: 'X11/Xlocale.h': No such file or directory

    When you use FLTK with VS2010, you may get the error: fatal error C1083: Cannot open include file: ' ...

  3. FlyCaptureProperty 摄像机属性

    An enumeration of the different camera properties that can be set via the API. Declaration enum FlyC ...

  4. STL各种容器的使用时机详解

    C++标准程序库提供了各具特长的不同容器.现在的问题是:该如何选择最佳的容器类别?下表给出了概述. 但是其中有些描述可能不一定实际.例如:如果你需呀处理的元素数量很少,可以虎落复杂度,因为线性算法通常 ...

  5. Html - 仿QQ空间右下角工具浮动块

    仿QQ空间右下角工具浮动块 <style type="text/css"> .cy-tp-area>.cy-tp-fixbtn>.cy-tp-text { ...

  6. C# - MVC

    Controllers 位置:Controllers 命名:HomeController   // Views/Home/Index public ActionResult Index() { Vie ...

  7. CentOS 6.5下源码安装MySQL 5.6

    变量lower_case_file_system说明是否数据目录所在的文件系统对文件名的大小写敏感.ON说明对文件名的大小写不敏感,OFF表示敏感. 在my.cnf中[mysqld]更改lower_c ...

  8. The P4 Language Specification v1.0.2 Header and Fields

    前言 本文参考P4.org网站给出的<The P4 Language Specification v1.0.2>的第二部分首部及字段,仅供学习:). 欢迎交流! Header and Fi ...

  9. mobile cpu上禁用alpha test的相关总结

       因为,每家芯片的特性不同,根据向framebuffer写法的不同,分为tile-based的mobile cpu,如ImgTec PowerVR,ARM Mali,一部分老版本Qualcomm  ...

  10. HTML Questions:Front-end Developer Interview Questions

    What's a doctype do? Instruct the browser to render the page. What's the difference between standard ...