兩者的差別是 .remove()是將整個元素移除，而 .empty()則是將清除元素裡的內容。
不多說，直接看範例：
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
| <html> | |
| <head> | |
| <title>show demo</title> | |
| </head> | |
| <body> | |
| <div id="showBlock"> | |
| Test content | |
| </div> | |
| <!-- click the button to remove item --> | |
| <input type="button" id="btn1" value="removeTxt"/> | |
| <input type="button" id="btn2" value="emptyTxt"/> | |
| <script src="http://code.jquery.com/jquery-1.9.1.js"></script> | |
| <script> | |
| //remove the showBlock item | |
| $("#btn1").click(function () { | |
| $("#showBlock").remove(); | |
| }); | |
| //empty the content in showBlock | |
| $("#btn2").click(function () { | |
| $("#showBlock").empty(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
執行後的結果：
.remove() 連同 div 一起被移除，而 .empty()則是僅移除 Test content 的部分，變成 <div id="showBlock"></div>
為了區別，我分別將兩個div加上外框，結果較明顯
範例實作：
參考資料：
[1] http://api.jquery.com/category/manipulation/dom-removal/
沒有留言:
張貼留言