jquery 里面remove删除和detach删除的区别；

最新推荐文章于 2024-07-12 09:36:48 发布

用户昵称已存在__

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量160

点赞数 1

文章标签： jquery javascript js css vue

本文链接：https://blog.csdn.net/m0_52714582/article/details/112608638

版权

 <script src="./jquery.js"></script>
    <style>
        #box{
            width:160px;
            height:300px;
            border:10px solid blue;
            border-radius: 25px;       
         }
    </style>
</head>
<body>
    <h2>remove删除/添加</h2>
    <button id="reDel">remove删除</button>
    <button id="reAdd">remove添加</button>
    <div id="box">
        <h1>大家好</h1>
        <h2>我是迪丽热巴</h2>
        <h3>今年27岁</h3>
        <h4>来自新疆乌鲁木齐</h4>
        <h5>我的男朋是	Lh.</h5>
        <h6>今年24岁</h6>
    </div>
    <h2>detach删除/添加</h2>
    <button id="deDel">detach删除</button>
    <button id="deAdd">detach添加</button>
    <script>
        var boxDom="";
        
        $("#box").click(function(){
            alert("迪丽热巴提醒你:你已经半个小时没有给我发消息了、天干物燥、小心我闹")
        })
        $("#reDel").click(function(){
            boxDom=$("#box").remove();//remove()删除会删除目标元素上绑定的事件，再
                                      //次添加目标元素后，绑定事件会失效
            console.log(boxDom)
        });
        $("#reAdd").click(function(){
            $("body").append(boxDom)
        })
        $("#deDel").click(function(){
            boxDom=$("#box").detach();//detach()删除会删除元素，但是不会删除元素上
                                      //绑定的事件,再次添加目标元素后，绑定事件依然生效
            console.log(boxDom)
        })
        $("#deAdd").click(function(){
            $("body").append(boxDom)
        })
    </script>

remove()删除方法和detach()删除方法的相同点是：都删除了元素自身、目标元素子元素、内文文本；
remove()删除方法和detach()删除方法的不同点是：
通过remove()方法删除后，利用删除的返回值再次添加到页面上，之前的点击事件也会失效；
通过detach()方法删除后，利用删除的返回值再次添加到页面上，之前的点击事件不会失效；

用户昵称已存在__

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 里面remove删除和detach删除的区别；

<script src="./jquery.js"></script> <style> #box{ width:160px; height:300px; border:10px solid blue; border-radius: 25px; } </style></head><.
复制链接

扫一扫