DOM节点删除之empty和remove区别，jQuery基础(二)

index.html
<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
        <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
    <style>
    .left,
    .right {
        width: 300px;
    }
 
    .left div,
    .right div {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
 
    .left div {
        background: #bbffaa;
    }
 
    .right div {
        background: yellow;
    }
    </style>
</head>
 
<body>
    <h2>通过empty与remove移除元素</h2>
    <div class="left">
        <button id="bt1">点击通过jQuery的empty移除内部P元素</button>
        <button id="bt2">点击通过jQuery的remove移除整个节点</button>
    </div>
    <div class="right">
        <div id="test1">
            <p>p元素1</p>
            <p>p元素2</p>
        </div>
        <div id="test2">
            <p>p元素3</p>
            <p>p元素4</p>
        </div>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //删除了2个p元素，但是本着没有删除 
        $("#test1").empty()
    })
 
    $("#bt2").on('click', function() {
        //删除整个节点
        $("#test2").remove()
    })
    </script>
</body>
 
</html>
DOM节点删除之empty和remove区别

任务
