DIV CSS 佈局教程網

6.4 刪除節點
編輯:jQuery基礎知識     

在jQuery中,對於刪除節點,我們有3種方法:

  • (1)remove();
  • (2)detach();
  • (3)empty();

一、remove()

在jQuery中,我們可以使用remove()方法將某個節點刪除。

語法:

 
$(A).remove()

舉例1:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                $("ul li:eq(3)").remove();
            })
        })
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>canvas</li>
    </ul>
    <input id="btn" type="button" value="remove刪除" />
</body>
</html>

在浏覽器預覽效果如下:

當我們點擊“刪除”按鈕之後,預覽效果如下:

分析:

$("ul li:eq(3)").remove()表示選擇ul元素下的第4個li元素。對於eq()選擇器,下標是從0開始的。eq()選擇器非常實用,如果忘記的同學記得回去翻一下“jQuery簡單偽類選擇器”這一節。

舉例2:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                //remove()可以將所選元素刪除,並且返回所選元素
                var $li = $("ul li:eq(3)").remove();
                $($li).appendTo("ul");
            })
        })
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>canvas</li>
    </ul>
    <input id="btn" type="button" value="remove刪除" />
</body>
</html>

在浏覽器預覽效果如下:

當我們點擊“刪除”按鈕之後,預覽效果如下:

分析:

關於remove()方法,還有一點需要注意,就是這個方法可以返回一個值,返回值類型為刪除的jQuery節點對象。也就是說,雖然這個節點被刪除了,但是還可以通過返回值來再次使用這個對象。

這裡我們將刪除後的元素賦值給變量$li,然後再使用appendTo()方法添加到ul元素內部末尾。

其實根據remove()方法這個特點,我們可以輕松實現互換某兩個元素!請看下面一個簡單例子。

舉例3:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        ul li:nth-child(2),ul li:nth-child(4)
        {
            background-color:Orange;
        }
    </style>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                //將內容為“CSS”這一個li刪除並賦值給$li1
                var $li1 = $("ul li:eq(1)").remove();
                $($li1).insertAfter("ul li:eq(1)");
                //將內容為“jQuery”這一個li刪除並賦值給$li2
                var $li2 = $("ul li:eq(3)").remove();
                $($li2).insertBefore("ul li:eq(1)");
            })
        })
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>canvas</li>
    </ul>
    <input id="btn" type="button" value="remove刪除" />
</body>
</html>

在浏覽器預覽效果如下:

當我們點擊“刪除”按鈕之後,預覽效果如下:

分析:

這個例子實現了內容為“CSS”和“jQuery”這兩個li元素的互換。技巧是借助“JavaScript”這一個li元素為參照物,然後使用我們上一節的“jQuery插入節點”的方法來實現。

雖然這段代碼看著很簡單,但是實際上需要注意的地方並不少,我們一步步來給大家分析。

當我們執行li1 = $("ul li:eq(1)").remove()這句代碼之後,得到的HTML結構如下:

 
<ul>
    <li>HTML</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>canvas</li>
</ul>

這個時候HTML結構已經變化,也就是說有些人試圖使用$("ul li:eq(2)")來選擇“JavaScript”這一列表項這是不可取的(這是參考上一個HTML結構),正確的實現方式是$("ul li:eq(1)")。

當我們執行$($li1).insertAfter("ul li:eq(1)")這句代碼之後,得到的HTML結構如下:

 
<ul>
    <li>HTML</li>
    <li>JavaScript</li>
    <li>CSS</li>
    <li>jQuery</li>
    <li>canvas</li>
</ul>

當我們執var $li2 = $("ul li:eq(3)").remove()這句代碼之後,得到的HTML結構如下:

 
<ul>
    <li>HTML</li>
    <li>JavaScript</li>
    <li>CSS</li>
    <li>canvas</li>
</ul>

當我們執行$($li2).insertBefore("ul li:eq(1)")這句代碼之後,得到的HTML結構如下:

 
<ul>
    <li>HTML</li>
    <li>jQuery</li>
    <li>JavaScript</li>
    <li>CSS</li>
    <li>canvas</li>
</ul>

二、detach()

在jQuery中,除了remove()方法之外,我們還可以使用detach()方法來將某個元素刪除。

語法:

 
$(A).detach()

說明:

detach()方法和remove()方法作用相似,但是兩者卻有著本質上的區別。

remove()方法是“徹底”地刪除元素。也就是說使用remove()方法,不僅元素會被刪除,所綁定的事件都會被刪除。

detach()方法是“半徹底”地刪除元素,也就是說使用detach()方法,只有元素被刪除,所綁定的事件並不會刪除。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //為每一個li元素綁定一個click事件,點擊li元素會彈出相應的文本內容
            $("li").click(function () {
                var txt = $(this).text();
                alert(txt);
            });
            $("#btn").click(function () {
                //刪除“jQuery”這一個li元素
                var $li = $("ul li:eq(3)").remove();
                //將刪除的li元素在添加到ul元素內部的末尾
                $($li).appendTo("ul");
            })
        })
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>canvas</li>
    </ul>
    <input id="btn" type="button" value="remove刪除" />
</body>
</html>

在浏覽器預覽效果如下:

分析:

在這裡,我們為每一個li元素添加一個click(單擊)事件,點擊任何一個li元素,都會彈出該li元素的文本內容。當我們點擊“刪除”按鈕之後,“jQuery”這一項被添加到ul元素內部末尾。但是這個時候如果我們點擊“jQuery”這一項時候,會發現之前所綁定的click事件消失了。

我們在“在線測試”中將remove()方法替換成detach()方法後,卻可以發現li元素雖然被刪除,但是如果重新添加使用,該元素所綁定的事件仍然存在。

終上所述,我們可以總結:當我們刪除節點後,如果希望重新使用該節點,並且希望被刪除的節點在重新使用後還能保留原來綁定的事件,那我們應該使用detach()而不是remove()。

三、empty()

remove()和detach()都是將某個元素刪除。如果我們想要“清空”某個節點,則可以用到empty()方法。

在jQuery中,我們可以使用empty()方法清空元素內部的所有節點。

語法:

 
$(A).empty()

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                $("ul li:eq(3)").empty();
            })
        })
    </script>
</head>
<body>
    <ul>
        <li><strong>HTML</strong></li>
        <li><strong>CSS</strong></li>
        <li><strong>JavaScript</strong></li>
        <li><strong>jQuery</strong></li>
        <li><strong>canvas</strong></li>
    </ul>
    <input id="btn" type="button" value="empty清空" />
</body>
</html>

在浏覽器預覽效果如下:

當我們點擊“清空”按鈕之後,預覽效果如下:

分析:

remove()和detach()這2個方法刪除節點時,會將自身節點以及後代節點一並刪除。但是empty()方法僅僅刪除後代節點,而會保留自身節點。

四、深入了解remove()、detach()和empty()

在jQuery中,remove()、detach()和empty()這3種方法其實還可以接受一個參數,例如remove()方法語法如下(detach()和empty()也類似):

 
$(A).empty()

說明:

參數expression是一個jQuery選擇器表達式。所謂的jQuery選擇器表達式,說白了就是我們在前幾章所學到的選擇器。

其中expression可以省略,$(A).remove(expression)表示刪除符合expression條件的A元素。當expression省略時,即$(A).remove()時,表示刪除所有的A元素。

 
$("#div3").remove();
$("div").remove("#div3");

上面這兩句代碼其實是等價的,一般情況下,我們建議使用無參數的remove()方法,直接把篩選條件放在$()選擇器裡面,沒必要多此一舉把篩選條件放在方法後面。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved