jquery動態刪除html代碼

時間  2019-12-09
標籤 jquery 動態 刪除 html 代碼 欄目 JQuery 简体版
原文   原文鏈接

1.remove()

remove()方法移除被選元素，包括全部的文本和子節點。
語法：$(selector).remove()
當咱們想將元素自身移除時咱們用 .remove()，同時也會移除元素內部的一切，包括綁定的事件及與該元素相關的jQuery數據。
該方法不會把匹配的元素從 jQuery 對象中刪除，於是能夠在未來再使用這些匹配的元素。
但除了這個元素自己得以保留以外，remove() 不會保留元素的 jQuery 數據。其餘的好比綁定的事件、附加的數據等都會被移除。javascript

例子1：（移除數據）css

<div class="header"></div>
<div id="middle">你好</div>
<div id="foot"></div>
<input type="button" value="刪除">
<script>
$("input").on('click', function() {
        //刪除整個 id=middle的節點
        $("#middle").remove();
})
</script>

初始
html

點擊刪除按鈕以後
java

能夠看到使用remove方法刪除以後，整個 id=middle的節點包括裏面的數據都沒有了jquery

例子2（子節點的數據也會被移除）app

<div class="header">hello</div>
<div id="middle">你好</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script>
$("input").on('click', function() {
        //刪除全部元素爲div的節點
        $("div").remove();
})
</script>

初始
函數

點擊刪除按鈕以後
ui

能夠看到使用remove方法刪除以後，整個 id=middle的節點包括裏面的數據都沒有，該節點所包含的全部後代節點和後代節點的數據都沒有了this

例子3(將全部符合的刪除)3d

<div class="header">hello</div>
<div id="middle">你好</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script>
$("input").on('click', function() {
        //刪除全部元素爲div的節點
        $("div").remove();
})
</script>

初始

點擊刪除按鈕以後

能夠看到使用remove方法刪除以後，全部元素是div的節點包括裏面的數據和沒了

例子4(傳遞參數來選擇性地刪除元素)
remove() 方法也可接受一個參數，容許您對被刪元素進行過濾。該參數能夠是任何 jQuery 選擇器的語法。
例子：

<div id="header">hello</div>
<div id="middle">你好</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script src="jquery-1.11.3.min.js"></script>
<script>
$("input").on('click', function() {
        //刪除全部元素爲div的節點
       $("div").remove("div[id!=foot]");
})
</script>

點擊前

點擊刪除按鈕以後

例子：

<div id="header">hello</div>
<div id="middle">你好</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script>
$("input").on('click', function() {
        //刪除全部元素爲div的節點
       $("div").filter("#foot").remove();
})
</script>

點擊前

點擊刪除按鈕以後

以前有講過：
（1）不會把匹配的元素從 jQuery 對象中刪除，於是能夠在未來再使用這些匹配的元素。
雖然在前面已經把元素從文檔中被移除但其實將其從jQuery對象中移除，所以咱們還能夠使用該jQuery對象，將它再次放入文檔中
簡而言之，就是被刪除的元素是能夠被找回來的。
當某個節點用remove()方法刪除時。這個方法的返回值是一個指向已被刪除的節點的引用，所以能夠在之後再使用這些元素。下面的JQuery代碼說明元素用remove()方法刪除後，仍是能夠繼續使用的。

例子1

<div class="header"></div>
<div id="middle">你好</div>
<div id="foot"></div>
<input type="button" value="刪除">
<script>
$("input").on('click', function() { 
    var $li =$("#middle").remove();  
    $li.appendTo("body");  
})
</script>

初始

刪除再追回代碼

例子2：

<div class="header">hello</div>
<div id="middle">
    你好
</div>
<div id="foot"></div>
<input type="button" value="刪除">
<script>
$("input").on('click', function() { 
    var $li =$("#middle").remove();  
    $li.appendTo(".header");  
})
</script>

初始

刪除再追回代碼

例子3

<div id="header">hello</div>
<div id="middle">
    你好
</div>
<div id="foot"></div>
<input type="button" value="刪除">
<script>
$("input").on('click', function() { 
    var $li =$("#middle").remove();  
    $li.appendTo("#foot");  
})
</script>

初始

刪除再追回代碼

若是說只是想把一個元素移動到另外一個位置，那咱們徹底不須要寫這麼複雜，
能夠直接使用appendTo()方法的特性來簡化以上代碼，JQuery代碼以下：

var $li =$("#middle").remove(); $li.appendTo("#foot");
寫成$("#middle").appendTo("#foot");
這就是移動操做，這些在以前的文章jquery實現動態添加html代碼中有講過。
類似的還有prependTo(),prepend (),append (),brefore(),insertBefore(),insertAter(),after()
（2）這個元素自己得以保留以外，remove() 不會保留元素的 jQuery 數據。其餘的好比綁定的事件、附加的數據等都會被移除。

例子1：（元素的屬性指定的事件不會被刪除）

<style> 
    .box{
        width:500px;
        height:500px;
        background:#eee;
        color:#fff;
        border:1px solid #eee;
    }
    .box_inner{
        width:200px;
        height:200px;
        margin:100px;
        background:green;
        color:#fff;
    }
    .box_inner:hover{
        background:red;
        color:green;
    }
</style>  
</head>
<body>
<div id="header">hello</div>
<div id="middle">
    <div class="box">
    <div class="box_inner">
        我還在
    </div>
        </div>
</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script>  
$("input").on('click', function() { 
    var $li =$("#middle").remove();  
    $li.appendTo("#foot");  
})
</script>

解析：

圖中的綠色部分有個hover變色效果，咱們點擊按鈕刪除代碼有加上發現仍有hover變色效果

例子2：（JQuery動態綁定的事件會被刪除）

<style> 
    .box{
        width:500px;
        height:500px;
        background:#eee;
        color:#fff;
        border:1px solid #eee;
    }
    .box_inner{
        width:200px;
        height:200px;
        margin:100px;
        background:green;
        color:#fff;
    }
</style>  
</head>
<body>
<div id="header">hello</div>
<div id="middle">
    <div class="box">
        <div class="box_inner">
            我還在
        </div>
    </div>
</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script>  
$("input").on('click', function() { 
    var $li =$("#middle").remove();  
    $li.appendTo("#foot");  
})
$(".box_inner").hover(
    function(){
        $(this).css({"background":"red","color":"green","cursor":"pointer"});
    },
    function(){
        $(this).css({"background":"green","color":"#fff"});
    })
</script>

解析：

圖中的綠色部分有個hover變色效果，咱們點擊按鈕刪除代碼又追回元素髮現hover效果已經沒有效果。
延伸：
若是是移動操做的話，JQuery動態綁定的事件是不被刪除的。

例子3：（直接在元素節點中綁定的事件不會被刪除）

<style> 
    .box{
        width:500px;
        height:500px;
        background:#eee;
        color:#fff;
        border:1px solid #eee;
    }
    .box_inner{
        width:200px;
        height:200px;
        margin:100px;
        background:green;
        color:#fff;
    }
</style>  
</head>
<body>
<div id="header">hello</div>
<div id="middle">
    <div class="box">
        <div class="box_inner" onmouseover="over(this)" onmouseout="out(this);">
            我還在
        </div>
    </div>
</div>
<div id="foot">早上好</div>
<input type="button" value="刪除"  />
<script> 
$("input").on('click', function() { 
    var $li =$("#middle").remove();  
    $li.appendTo("#foot");  
})
function over(obj) {    
    $(obj).css({"background":"red","color":"green","cursor":"pointer"});
};
function out(obj) { 
    $(obj).css({"background":"green","color":"#fff"});
};
</script>

解析：

圖中的綠色部分有個hover變色效果，咱們點擊按鈕刪除代碼有加上發現仍有hover變色效果

例子4(元素關聯的data值會被刪除)

<div id="header">hello</div>
<div id="middle">
    <div class="box">
        <div class="box_inner">
            我還在
        </div>
    </div>
</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script> 
var $div2=$(".box_inner");  
$div2.data("value", 1);
console.log($(".box_inner").data("value"));  
$("input").on('click', function() {
    var $li =$("#middle").remove();  
    $li.appendTo("#foot");  
    console.log($(".box_inner").data("value"));  
})
</script>

解析：第二個undefined是按鈕點擊後打印的附加數據的值，這也就是刪除後再追回元素的jquery的附加數據是undefined，可是初始值是1，能夠得知：jquery的相關數據是被刪掉了。

2.empty()

描述: 從DOM中移除集合中匹配元素的全部子節點。
語法：.empty()
這個方法不接受任何參數
這個方法不只移除子元素（和其餘後代元素），一樣移除元素裏的文本。由於，根聽說明，元素裏任何文本字符串都被看作是該元素的子節點。
可是須要注意的是：
他不會刪除自身節點

例子1：

<div id="header"></div>
<div id="middle">
    <div class="box">
        <div class="box_inner">
            我還在
        </div>
    </div>
</div>
<div id="foot"></div>
<input type="button" value="刪除"  />
<script> 
$("input").on('click', function() { 
    $("#middle").empty();   
})
</script>

初始

刪除後

empty()函數與html()函數具備如下等價代碼：

$("p").empty( );

// 等價於

$("p").html("");

例子2：（返回的對象不包括刪除的子元素，只保留節點。）

<div id="header"></div>
<div id="middle">
    <div class="box">
        <div class="box_inner">
            我還在
        </div>
    </div>
</div>
<div id="foot"></div>
<input type="button" value="刪除"  />
<script> 
$("input").on('click', function() { 
    var $li =$("#middle").empty();  
    $li.appendTo("#foot");  

})
</script>


刪除再追回代碼

例子3（empty()表示移除的是選擇器的全部子元素，返回的是選擇器選中的元素。在如何處理被刪除元素的data值和事件處理函數時，其表現和detach()一致，會保留刪除元素的data值和事件處理函數。）
（JQuery動態綁定的事件不會被刪除）

<style> 
    #middle{
        width:200px;
        height:200px;
        margin:100px;
        background:green;
        color:#fff;
    }
</style>  
</head>
<body>
<div id="header"></div>
<div id="middle">
    我還在
</div>
<div id="foot"></div>
<input type="button" value="刪除"  />
<script src="jquery-1.11.3.min.js"></script>
<script> 
$("input").on('click', function() { 
    var $li =$("#middle").empty();  
    $li.appendTo("#foot");  
})
$("#middle").hover(
    function(){
        $(this).css({"background":"red","color":"green","cursor":"pointer"});
    },
    function(){
        $(this).css({"background":"green","color":"#fff"});
    })
</script>

例子4（直接在元素節點中綁定的事件不會被刪除）

<style> 
    #middle{
        width:200px;
        height:200px;
        margin:100px;
        background:green;
        color:#fff;
    }
</style>  
</head>
<body>
<div id="header"></div>
<div id="middle"  onmouseover="over(this)" onmouseout="out(this);">
    我還在
</div>
<div id="foot"></div>
<input type="button" value="刪除"  />
<script> 
$("input").on('click', function() { 
    var $li =$("#middle").empty();  
    $li.appendTo("#foot");  
})
function over(obj) {    
    $(obj).css({"background":"red","color":"green","cursor":"pointer"});
};
function out(obj) { 
    $(obj).css({"background":"green","color":"#fff"});
};
</script>

例子5（會保留刪除元素的data值）

<style> 
    #middle{
        width:200px;
        height:200px;
        margin:100px;
        background:green;
        color:#fff;
    }
</style>  
</head>
<body>
<div id="header">hello</div>
<div id="middle">
    <div class="box">
        <div class="box_inner">
            我還在
        </div>
    </div>
</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script> 
var $div2=$("#middle");  
$div2.data("value", 1);
console.log($("#middle").data("value"));  
$("input").on('click', function() {
    var $li =$("#middle").empty(); ;  
    $li.appendTo("#foot");  
    console.log($("#middle").data("value"));  
})
</script>


第二個1是按鈕點擊後打印的附加數據的值，這也就是刪除後再追回元素的jquery的附加數據是1，可是初始值是1，能夠得知：jquery的相關數據是沒有被刪除。

3. detach()

定義和用法
detach() 方法移除被選元素，包括全部文本和子節點。
這個方法會保留 jQuery 對象中的匹配的元素，於是能夠在未來再使用這些匹配的元素。
detach() 會保留全部綁定的事件、附加的數據，這一點與 remove() 不一樣。
固然這裏要特別注意，detach方法是JQuery特有的，因此它只能處理經過JQuery的方法綁定的事件或者數據
語法：$(selector).detach()

例子1（刪除子節點，全部文本和自己節點）

刪除後

例子2(傳遞參數來選擇性地刪除元素)
detach()方法也可接受一個參數（選擇器表達式），容許您對被刪元素進行過濾。該參數能夠是任何 jQuery 選擇器的語法。
例子1：

<div id="header">hello</div>
<div id="middle">你好</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script type="text/javascript">
$("input").on('click', function() {
    $("div").detach("div[id!=foot]");
})
</script>

點擊前

刪除後

例子3（元素追回）
不會把匹配的元素從 jQuery 對象中刪除，於是能夠在未來再使用這些匹配的元素。
雖然在前面已經把元素從文檔中被移除
但其實將其從jQuery對象中移除，所以咱們還能夠使用該jQuery對象，將它再次放入文檔中
簡而言之，就是被刪除的元素是能夠被找回來的。

例子：

<div id="header"></div>
<div id="middle">
    <div>
    你好
    </div>
</div>
<div id="foot"></div>
<input type="button" value="刪除">
<script>
$("input").on('click', function() {
    var $li=$("#middle").detach();
    $li.appendTo("#foot");  
})
</script>

初始

刪除後找回

例子（JQuery動態綁定的事件不會被刪除）：

<style> 
    #middle{
        width:200px;
        height:200px;
        margin:100px;
        background:green;
        color:#fff;
    }
</style>  
</head>
<body>
<div id="header"></div>
<div id="middle">
    我還在
</div>
<div id="foot"></div>
<input type="button" value="刪除"  />
<script> 
$("input").on('click', function() { 
    var $li =$("#middle").detach(); 
    $li.appendTo("#foot");  })
$("#middle").hover(
    function(){
        $(this).css({"background":"red","color":"green","cursor":"pointer"});
    },
    function(){
        $(this).css({"background":"green","color":"#fff"});
    })
</script>

例子（直接在元素節點中綁定的事件不會被刪除）

<style> 
    #middle{
        width:200px;
        height:200px;
        margin:100px;
        background:green;
        color:#fff;
    }
</style>  
</head>
<body>
<div id="header"></div>
<div id="middle"  onmouseover="over(this)" onmouseout="out(this);">
    我還在
</div>
<div id="foot"></div>
<input type="button" value="刪除"  />
<script> 
$("input").on('click', function() { 
    var $li =$("#middle").detach();
    $li.appendTo("#foot");  
})
function over(obj) {    
    $(obj).css({"background":"red","color":"green","cursor":"pointer"});
};
function out(obj) { 
    $(obj).css({"background":"green","color":"#fff"});
};
</script>

例子（會保留刪除元素的data值）

<style> 
    #middle{
        width:200px;
        height:200px;
        margin:100px;
        background:green;
        color:#fff;
    }
</style>  
</head>
<body>
<div id="header">hello</div>
<div id="middle">
    <div class="box">
        <div class="box_inner">
            我還在
        </div>
    </div>
</div>
<div id="foot">早上好</div>
<input type="button" value="刪除">
<script> 
var $div2=$("#middle");  
$div2.data("value", 1);
console.log($("#middle").data("value"));  
$("input").on('click', function() {
    var $li =$("#middle").detach();
    $li.appendTo("#foot");  
    console.log($("#middle").data("value"));  
})
</script>


第二個1是按鈕點擊後打印的附加數據的值，這也就是刪除後再追回元素的jquery的附加數據是1，可是初始值是1，能夠得知：jquery的相關數據是沒有被刪除。

4.三者的對比

最後，咱們看下這三者的對比圖

本文爲原創，如需轉載請註明轉載地址，謝謝合做！
本文地址：http://www.cnblogs.com/wanghuih/p/6143577.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程