您现在的位置:首页 >> 前端 >> 内容

DOM节点删除之empty和remove区别

时间:2017/8/4 13:47:27 点击:

  核心提示:要用到移除指定元素的时候,jQuery提供了empty()与remove([expr])二个方法,两个都是删除元素,但是两者还是有区别empty方法严格地讲,empty()方法并不是删除节点,而是清空...

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

empty方法

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

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

remove方法

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

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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
        <script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style>
    .left,
    .right {
        width: 300px;
    }
    
    .left p,
    .right p {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
    
    .left p {
        background: #bbffaa;
    }
    
    .right p {
        background: yellow;
    }
    </style>
</head>


<body>
    <h2>通过empty与remove移除元素</h2>
    <p class="left">
        <button id="bt1">点击通过jQuery的empty移除内部P元素</button>
        <button id="bt2">点击通过jQuery的remove移除整个节点</button>
    </p>
    <p class="right">
        <p id="test1">
            <p>p元素1</p>
            <p>p元素2</p>
        </p>
        <p id="test2">
            <p>p元素3</p>
            <p>p元素4</p>
        </p>
    </p>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //删除了2个p元素,但是本着没有删除 
        $("#test1").empty()
    })
    $("#bt2").on('click', function() {
        //删除整个节点
        $("#test2").remove()
    })
    </script>
</body>
</html>

 

Tags:DO OM M节 节点 
作者:网络 来源:qq_3703664