jQuery DOM操作empty与remove的区别

要用到移除指定元素的时候,jQuery提供了empty()与remove([expr])二个方法,两个都是删除元素,但是两者还是有区别

empty方法

    严格地讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点

    empty不能删除自己本身这个节点

remove方法

    该节点与该节点所包含的所有后代节点将同时被删除

    提供传递一个筛选的表达式,删除指定合集中的元素

下面我们将用代码来详细剖析

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>remove()与empty()的区别</title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style type="text/css">
        #dv1{
            width:250px;
            height:250px;
            background:red;
            float:left;
        }

        #dv2{
            width:250px;
            height:250px;
            background:green;
            float: left;
            margin-left:5px;
            margin-right:5px;
        }
    </style>
</head>
<body>
    <div id="dv1">
        <p>元素1</p>
        <p>元素2</p>
    </div>

    <div id="dv2">
        <p>元素3</p>
        <p>元素4</p>
    </div>
    <input type="button" value="empty" id="but1">
    <input type="button" value="remove" id="but2">

    <script>
        $("#but1").click(function(){
            $("#dv1").empty();
        })

        $("#but2").click(function(){
            $("#dv2").remove();
        })
    </script>
</body>
</html>

如上代码,我们运行之后可以看到,当我点击empty时,会把 元素1 元素2   给清空掉,但是div 还是存在的

当我点击remove 时,不仅里面的元素会被删除,而且自身的div也会被删除掉

继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>remove()与empty()的区别</title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style type="text/css"> #dv1{ width:250px; height:250px; background:red; float:left; } #dv2{ width:250px; height:250px; background:green; float: left; margin-left:5px; margin-right:5px; } </style> </head> <body> <div id="dv1"> <p>元素1</p> <p>元素2</p> </div> <div id="dv2"> <p>元素3</p> <p>元素4</p> </div> <input type="button" value="empty" id="but1"> <input type="button" value="remove" id="but2"> <script> $("#but1").click(function(){ $("#dv1").empty(); }) $("#but2").click(function(){ $("#dv2").remove(); }) </script> </body> </html>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

JQuery 基础入门教程

高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

一辆想出轨的无轨电车

都是清除,还分这么多

7年前    添加回复 0

汪汪

remove方法 该节点与该节点所包含的所有后代节点将同时被删除 提供传递一个筛选的表达式,删除指定合集中的元素

7年前    添加回复 0

Alway.以为

这个有什么啊

7年前    添加回复 0

末日的春天

就看清除的干不干净

7年前    添加回复 0

橱窗的光

本节的学习,我知道了清空和清除的区别了

7年前    添加回复 0

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~