zoukankan      html  css  js  c++  java
  • JQuery:JQuery删除元素

    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="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="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="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>

      

     

  • 相关阅读:
    Ajax基础:3.Json
    Head First Design Patterns State Pattern
    Head First Design Patterns Template Method Pattern
    Articles For CSS Related
    Head First Design Patterns Decorator Pattern
    代码审查工具
    How To Be More Active In A Group
    Head First Design Patterns Factory Method Pattern
    Head First Design Patterns Composite Pattern
    Tech Articles
  • 原文地址:https://www.cnblogs.com/XYQ-208910/p/5891099.html
Copyright © 2011-2022 走看看