6.4 刪除節點_jQuery基礎知識

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> jQuery基礎知識 >> 6.4 刪除節點

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()方法，直接把篩選條件放在$()選擇器裡面，沒必要多此一舉把篩選條件放在方法後面。

jQuery基礎知識

10.7 jQuery查找方法: 在jQuery中查找方法，主要以“當前所選元素”為基點，查找它的父元素、子元素或者兄弟元素等。過濾方
6.3 插入節點: 在JavaScript中，插入節點只有appendChild()和insertBefore()這兩種
6.6 替換節點: 在jQuery中，如果我們想要替換節點，有2種方法：

jQuery基礎知識 JQuery入門技巧 JQuery特效代碼 JQuery常見問題

小編推薦

9.6 表達式過濾filter()和has() 3.2 簡單偽類選擇器 7.7 綁定事件 8.6 隊列動畫 2.5 本章總結 9.1 jQuery過濾方法簡介 8.4 滑上和滑下 2.4 屬性選擇器 3.4 可見性偽類選擇器 6.7 包裹節點

DIV CSS 佈局教程網

一、remove()

二、detach()

三、empty()

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

相關文章