传奇手游私sf平台发布网

書名： 15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）
作者名：劉鑫
本章字數： 598字
更新時間： 2020-11-28 16:21:46

3.4 從頁面中刪除元素

從網頁上刪除節點也是日常工作中經常遇到的一種操作，jQuery提供了兩個可以用來從DOM元素樹中移除節點的方法，分別是：

● remove()方法用來刪除指定的DOM元素。它會將節點從DOM元素樹中移除，但是會返回一個指向DOM元素的引用，因此并不是真正地將jQuery引用的元素對象刪除，可以通過這個引用繼續操作元素。

● empty()方法該方法將不會刪除節點，只是清空節點中的內容，DOM元素依然保持在DOM元素樹中。

remove()方法會將元素從DOM對象樹中移除，但是不會把引用這些對象的jQuery對象刪除，因此還是可以使用jQuery對象進行操作。而empty是將元素中的內容清空。接下來創建一個名為dynamic_remove.html的網頁，插入一些HTML元素，然后分別演示使用remove和empty的效果。

【示例3-4】dynamic_remove.html

        01    <body>
        02   <div id="idwelcome">演示使用remove和empty的方法<br/></div>
        03   <div id="idtip"><b>remove方法會從DOM樹中移除節點</b><br/></div>
        04   <div id="idsenc"><b>empty方法只是清除元素的內容</b><br/></div>
        05    <div><input name="btnremove" type="button" id="btnremove" value="remove
    方法" />
        06    &nbsp;
        07   <input name="btnempty" type="button" id="btnempty" value="empty方法" />
        08    </div>
        09    </body>

可以看到，在body區使用了3個div用來顯示消息，另外兩個div中放置了兩個按鈕，分別用來調用remove方法和empty方法。這兩個按鈕的事件處理代碼如下：

        01    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
        02    <script type="text/javascript">
        03       $(document).ready(function(e) {
        04        $("#btnremove").click(
        05              function(){
        06             var id1=$("#idtip").remove();    //移除DOM對象
        07             $("body").append(id1);         //重新添加已被移除的DOM對象
        08         });
        09        $("#btnempty").click(
        10              function(){
        11             var id1=$("#idsenc").empty();    //清除DOM對象
        12             //重新添加DOM對象的內容
        13             id1.append("這是重新添加的內容哦，原來的內容已被清除了！");
        14         });
        15    });
        16    </script>

Remove按鈕內部調用了remove方法，盡管這個元素已經從DOM中移除了，不過jQuery仍然引用這個對象，因此可以將其再次添加到body中，使之經歷刪除又添加的過程。Empty只是清除DOM中的內容，重新向div中添加元素，單擊兩個按鈕后的效果如圖3.5所示。

圖3.5 移除元素后的效果

官术网_书友最值得收藏!

15天學會jQuery編程與實戰（視頻教學版） （Web前端技術叢書）

3.4 從頁面中刪除元素

15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）