jQuery文档操作--empty()和remove()

Posted fengfuwanliu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery文档操作--empty()和remove()相关的知识,希望对你有一定的参考价值。

   empty()

概述

     删除匹配的元素集合中所有的子节点

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
        <script>
            $(document).ready(function() {
                //empty()删除匹配的元素集合中所有的子节点
                $("button").click(function() {
                    $("div").empty();
                });
            });
        </script>
    </head>

    <body>
        <div style="background-color: #FF0000;width: 130px;height: 50px;">
            <ol>
                <li>第一段话</li>
                <li>第二段话</li>
            </ol>
        </div>
        <button>点击</button>
    </body>

</html>

   remove([expr])

概述

     从DOM中删除所有匹配的元素。

     这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除

参数

    expr  用于筛选元素的jQuery表达式

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
        <script>
            $(document).ready(function() {
                //remove()从DOM中删除所有匹配的元素
                $("button").click(function() {
                    $("div").remove();
                });
            });
        </script>
    </head>

    <body>
        <div style="background-color: #FF0000;width: 130px;height: 50px;">
            <ol>
                <li>第一段话</li>
                <li>第二段话</li>
            </ol>
        </div>
        <button>点击</button>
    </body>

</html>

 

以上是关于jQuery文档操作--empty()和remove()的主要内容,如果未能解决你的问题,请参考以下文章

[ jquery 文档处理 empty() remove([expr]) detach([expr]) ] 此方法用于把所有匹配的元素移除

jquery 删除元素: empty and remove

学习jQuery后的部分总结

jQuery remove()和empty()

jQuery 删除元素remove()和empty() 用法

jquery的empty()和remove()方法