zoukankan      html  css  js  c++  java
  • 移除元素

     方法  说明
    remove() 从DOM中移除匹配的元素及其所有后代和文本节点。
    detach() 从DOM中移除匹配的元素及其所有后代和文本节点。还会在内存中保留副本。通常使用remove()方法。
    empty() 从DOM中移除匹配元素子节点及后代。
    unwrap() 移除匹配结果的父节点,并保留匹配元素。

    remove 示例,移除全部元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>remove</title>
            </script>
        </head>
        <body>
            <div style=" font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; padding: 0px !important; background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; auto !important; min-height: auto !important;">>
                <ul id="ul">
                    <li id="a">鼠标</li>
                    <li id="b">键盘</li>
                    <li id="c">屏幕</li>
                    <li id="d"><a>主机</a></li>
                </ul>
            </div>
     
            <button>移除元素</button>
            <script>
                $('button').on('click', function () {
                   $('div').remove();
                });
            </script>
        </body>
    </html>

    remove 示例,移除指定的元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>remove</title>
            </script>
        </head>
        <body>
            <div style=" font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; padding: 0px !important; background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; auto !important; min-height: auto !important;">>
                <ul id="ul">
                    <li id="a">鼠标</li>
                    <li id="b">键盘</li>
                    <li id="c">屏幕</li>
                    <li id="d"><a>主机</a></li>
                </ul>
            </div>
     
            <button>删除元素</button>
            <script>
                $('button').on('click', function () {
                   $('li').remove('#a');
                });
            </script>
        </body>
    </html>

    需要指定到具体的才能移除哦。

    detach()示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>detach</title>
            </script>
        </head>
        <body>
            <div style=" font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; padding: 0px !important; background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; auto !important; min-height: auto !important;">>
                <ul id="ul">
                    <li id="a">鼠标</li>
                    <li id="b">键盘</li>
                    <li id="c">屏幕</li>
                    <li id="d"><a>主机</a></li>
                </ul>
            </div>
      
            <button>移除元素</button>
            <script>
                $('button').on('click', function () {
                   $('div').detach();
                });
            </script>
        </body>
    </html>

    empty示例,清除所有元素文本

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>empty</title>
            </script>
        </head>
        <body>
            <div style=" font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; padding: 0px !important; background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; auto !important; min-height: auto !important;">>
                <ul id="ul">
                    <li id="a">鼠标</li>
                    <li id="b">键盘</li>
                    <li id="c">屏幕</li>
                    <li id="d"><a>主机</a></li>
                </ul>
            </div>
     
            <button>删除元素</button>
            <script>
                $('button').on('click', function () {
                   $('li').empty();
                });
            </script>
        </body>
    </html>

    unwrap() 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>unwrap</title>
            </script>
        </head>
        <body>
            <div style=" font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; padding: 0px !important; background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; auto !important; min-height: auto !important;">>
                <ul id="ul">
                    <li id="a">鼠标</li>
                    <li id="b">键盘</li>
                    <li id="c">屏幕</li>
                    <li id="d"><a>主机</a></li>
                </ul>
            </div>
      
            <button>移除元素</button>
            <script>
                $('button').on('click', function () {
                   $('ul').unwrap();
                });
            </script>
        </body>
    </html>
  • 相关阅读:
    面试C#需要准备的一些基础
    学习jQuery(一),做的第一个可拖动列的Grid
    面试的两道SQL题
    SSIS ODBC方式连接mysql数据库的一个问题
    WIN7下A卡解决部分游戏(CS、CF等)无法全屏问题
    显示Deprecated: Assigning the return value of new by reference is deprecated in解决办法
    Eclipse 中文插件的安装
    安装NASM for Linux
    将Eclipse中文注释字体变大方法
    如何查看局域网内所有IP
  • 原文地址:https://www.cnblogs.com/max-hou/p/9151869.html
Copyright © 2011-2022 走看看