从jQuery的remove()和原生JS的removeChild()方法再观jQuery对象和DOM对象的关系

最新推荐文章于 2023-06-26 22:22:38 发布

Alcantara6

最新推荐文章于 2023-06-26 22:22:38 发布

阅读量1.1w

点赞数 1

分类专栏：前端文章 JavaScript文章 jQuery文章文章标签： jQuery对象 DOM对象 remove removeChild

本文链接：https://blog.csdn.net/Alcantara/article/details/79135135

版权

前端文章同时被 3 个专栏收录

21 篇文章

订阅专栏

JavaScript文章

14 篇文章

订阅专栏

jQuery文章

6 篇文章

订阅专栏

本文探讨了jQuery的remove()方法与原生JavaScript的removeChild()方法在删除DOM节点时的区别，强调了两者对jQuery对象和DOM对象的影响。remove()方法返回的jQuery对象仍可使用，而removeChild()直接删除DOM节点。同时，文章通过代码验证了两种方法都可以恢复被删除的元素，但remove()方法会丢失事件绑定，而detach()方法则不会。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery对象是通过jQuery包装DOM对象后产生的对象。

jQuery的remove()方法和原生js的removeChild()方法都是从DOM中删除节点，方法的返回值是：

1. remove()方法：返回一个指向已被删除的节点的引用，这个节点元素还可以使用；

2. removeChild()方法：删除的节点仍然存在于内存，只是没有添加到当前文档的DOM树中。

可以总结为：remove()方法移除的是jQuery对象，这个对象又指向DOM节点；removeChild()方法则是直观得移除DOM节点。

两种方法都是把节点从DOM中临时删除，去往待定区！

jQuery对象和DOM对象是紧密相连，共生共存。

为验证这个结论，编制以下验证代码

结论为：每种情况都能恢复移除的元素。

当然，还有一点就是，jQuery的remove()方法移除后再追加，事件绑定不在了；detach()方法移除后再追加，事件绑定还在。

<!DOCTYPE html>
<html>
    <head>
        <meta chardelete=utf-8 />
        <title>从jQuery的remove()和原生JS的removeChild()方法再观jQuery对象和DOM对象的关系</title>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    </head>
    <style>
    </style>
        <div id='block1'>
            <div id='test1'>jQuery对象设置CSS样式，把节点从DOM移除，最后再把jQuery对象加入文档</div>
            <input type="button" id='delete1' value='delete1'>
            <input type="button" id='back1' value='back1'>
        </div>

       <div id="block2">
            <div id='test2'>jQuery对象设置CSS样式，移除jQuery对象，最后再把jQuery对象加入文档</div>
            <input type="button" id='delete2' value='delete2'>
            <input type="button" id='back2' value='back2'>
       </div>

        <div id="block3">
            <div id='test3'>用原生JS设置CSS样式，再获取jQuery对象，把节点从DOM移除，最后再把jQuery对象加入文档</div>
            <input type="button" id='delete3' value='delete3'>
            <input type="button" id='back3' value='back3'>
        </div>

        <div id="block4">
            <div id='test4'>用原生JS设置CSS样式，再获取jQuery对象，移除jQuery对象,最后再把jQuery对象加入文档</div>
            <input type="button" id='delete4' value='delete4'>
            <input type="button" id='back4' value='back4'>
        </div>

        <div id="block5">
            <div id='test5'>先获取jQuery对象，再用原生JS设置CSS样式，把节点从DOM移除，最后再把jQuery对象加入文档</div>
            <input type="button" id='delete5' value='delete5'>
            <input type="button" id='back5' value='back5'>
        </div>

        <div id="block6">
            <div id='test6'>先获取jQuery对象，再用原生JS设置CSS样式，移除jQuery对象,最后再把jQuery对象加入文档</div>
            <input type="button" id='delete6' value='delete6'>
            <input type="button" id='back6' value='back6'>
        </div>
    <script>
    $ (function () {
        var g = function (id) {
            return document.getElementById(id);
        };
        // jQuery对象设置CSS样式，把节点从DOM移除，最后再把jQuery对象加入文档
        var $test1 = $('#test1');
        $test1.css({'height':'100px','border':'1px solid red'});
        $('#delete1').click(function () {
            g('block1').removeChild(g('test1'));
        });
        $('#back1').click(function () {
            $test1.prependTo('#block1');
        })
        // jQuery对象设置CSS样式，移除jQuery对象，最后再把jQuery对象加入文档
        var $test2 = $('#test2');
        $test2.css({'height':'100px','border':'1px solid red'});
        $('#delete2').click(function () {
            $test2.remove();
        });
        $('#back2').click(function () {
            $test2.prependTo('#block2');
        });
        // 用原生JS设置CSS样式，再获取jQuery对象，把节点从DOM移除，最后再把jQuery对象加入文档
        g('test3').style.height = '100px';
        g('test3').style.border = '1px solid red';
        var $test3 = $('#test3');
        $('#delete3').click(function () {
            g('block3').removeChild(g('test3'));
        });
        $('#back3').click(function () {
            $test3.prependTo('#block3');
        })
        // 用原生JS设置CSS样式，再获取jQuery对象，移除jQuery对象,最后再把jQuery对象加入文档
        g('test4').style.height = '100px';
        g('test4').style.border = '1px solid red';
        var $test4 = $('#test4');
        $('#delete4').click(function () {
            $test4.remove();
        });
        $('#back4').click(function () {
            $test4.prependTo('#block4');
        })
        // 先获取jQuery对象，再用原生JS设置CSS样式，把节点从DOM移除，最后再把jQuery对象加入文档
        var $test5 = $('#test5');
        g('test5').style.height = '100px';
        g('test5').style.border = '1px solid red';
        $('#delete5').click(function () {
            g('block5').removeChild(g('test5'));
        });
        $('#back5').click(function () {
            $test5.prependTo('#block5');
        })
        // 先获取jQuery对象，再用原生JS设置CSS样式，移除jQuery对象,最后再把jQuery对象加入文档
        var $test6 = $('#test6');
        g('test6').style.height = '100px';
        g('test6').style.border = '1px solid red';
        $('#delete6').click(function () {
            $test6.remove();
        });
        $('#back6').click(function () {
            $test6.prependTo('#block6');
        })
    })
    </script>    
</html>