删除节点/移除/清空/分离

最新推荐文章于 2025-03-19 23:53:10 发布

恋恋玫瑰花

最新推荐文章于 2025-03-19 23:53:10 发布

阅读量1.6k

点赞数

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/weixin_42923643/article/details/81630886

版权

jQuery 专栏收录该内容

31 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除节点/移除/清空/分离</title>
    <style>
        p{
            background: #ff0;
            margin: 6px 0;
            cursor: pointer;
        }

        p.off{
            background: #fff;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        // window.onload=function(){
        //  var div = document.getElementsByTagName("div")[0];
        //  var p = document.getElementsByTagName("p")[0];
        //  var p1 = div.removeChild(p);
        //  // div的父级元素,在div的后一个兄弟插入p1的内容
        //  div.parentNode.insertBefore(p1,div.nextSibling);
        // }


        $(function(){

            $("p").click(function(){
                $(this).toggleClass("off");
            });
            var p;

            $("button").click(function(){
                // 清除所有p元素
                // var $p = $("p").remove();
                //将p中的内容插入到button之后
                // $p.insertAfter("button");

                // 效果和remove()一样,不同的是没有参数,直接将匹配元素包含的所有删除,但是结构中的p标签并没有删除掉,相当于只是清空了元素的内容
                // $("p").empty();

                if(p){
                    p.appendTo("body");
                    p=null;
                }else{
                    // 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
                    // p=$("p").detach();

                    // p中具备的click()方法就失效了
                    p=$("p").remove();
                }
            });
        });
    </script>
</head>
<body>
    <div>
        <p>段落文字</p>
    </div>
    <span>文字</span>
    <p>段落文字1</p>
    <p>段落文字2</p>
    <button>remove段落</button>
</body>
</html>