作業:構建網站 - 知識準備 - 清空和移除jQuery節點 - empty(),remove()

empty() 和 remove()


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="append" id="btnAppend"/>
    <input type="button" value="prepend" id="btnPrepend"/>
    <input type="button" value="after" id="btnAfter"/>
    <input type="button" value="before" id="btnBefore"/>
    <input type="button" value="appendTo" id="btnAppednTo"/>
    <input type="button" value="empty" id="btn"/> 
    <ul id="ul1">
        <li>這是第1個li標籤1</li>
        <li>這是第2個li標籤1</li>
        <li id="li31">這是第3個li標籤1</li>
        <li>這是第4個li標籤1</li>
        <li>這是第5個li標籤1</li>
    </ul>
    <ul id="ul2">
        <li>這是第1個li標籤2</li>
        <li>這是第2個li標籤2</li>
        <li id="li32">這是第3個li標籤2</li>
        <li>這是第4個li標籤2</li>
        <li>這是第5個li標籤2</li>
    </ul>
</body>
</html>
<script src="../JQuery/jquery-1.12.4.js"></script>
<script>
$(function(){
    $('#btn').click(function(){
        //1.
        $('#ul1').empty(); //不僅清除了元素,還清除了元素上綁定的事件

        //2.移除一個元素
        $('#li32').remove(); //自殺

        //3. 移除ul,但是隻能獲取li31這個標籤
        $('#li31').parent().remove();
    })
});
</script>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章