remove() 刪除節點 | detach() 刪除節點 | empty() 清空節點的內容 | clone() 複製節點，detachclone
remove() 刪除節點 | detach() 刪除節點 | empty() 清空節點的內容 | clone() 複製節點
<html><head> <title></title> <script src="jquery-2.1.3.js"></script></head><body> <div> <ul> <li>中國</li> <li>美國</li> <li>德國</li> <li>俄國</li> </ul> </div> <ul id="tow"></ul> <button id="a">remove</button><button id="b">detach</button><button id="c">empty</button></body></html><script type="text/javascript"> $(function () { $("li").click(function () { $(this).css("color", "red"); }) //----------------------remove() 刪除節點 //$("ul > li").filter(":contains(中國)").remove(); //刪除ul子項目li中包含“中國”文本的li //$("li").remove(":contains(中國)"); //remove()方法也可以通過傳遞參數來選擇性的刪除元素 ，這裡將包含“中國”文本的li刪除 $("#a").click(function () { var a = $("li").remove(); //刪除所有的li元素 $("#tow").append(a); //將剛剛刪除的li元素添加到id為tow的ul中 我們會發現改變顏色的click事件不起作用了。 }) //----------------------detach() 刪除節點 //detach()和remove()方法一樣，也是刪除節點，只是這個方法不會把匹配的元素從jquery對象中刪除，因而可以在將來使用這些匹配的元素，與remove()不同的是所有的綁定事件，附加的資料都會保留下來。 $("#b").click(function () { var b = $("li").detach(); //刪除所有的li元素 $("#tow").append(b);//將剛剛刪除的li元素添加到id為tow的ul中 我們會發現改變顏色的click事件還是起作用的。 }) //----------------------empty() 清空節點的內容 $("#c").click(function () { $("li").empty(); //empty()方法並不是刪除節點，而是清空節點的內容，節點還在。只是節點的內容被清空了 }) //----------------------clone() 複製節點 $("li").click(function () { $(this).clone().appendTo("#tow"); //複製當前的節點並將它追加到id=tow的元素中 }) //複製節點後，被複製的新元素並不具有任何行為，如果需要新元素也具有複製功能，可以如下這樣寫 $("li").click(function () { $(this).clone(true).appendTo("#tow");//注意參數true 它的含義就是：複製元素的同時複製元素中所綁定的事件 }) })</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
