jQuery 刪除、複製和替換元素
一、使用jQuery刪除元素
（1）、remove()移除所有匹配的元素
remove() 方法移除被選元素，包括所有文字和子節點。該方法不會把匹配的元素從 jQuery 物件中刪除，因而可以在將來再使用這些匹配的元素。
但除了這個元素本身得以保留之外，remove() 不會保留元素的 jQuery 資料。其他的比如繫結的事件、附加的資料等都會被移除。這一點與 detach() 不同。
語法：$(selector).remove()
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").remove(); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;"> This is some text in the div. <p>This is a paragraph in the div.</p> <p>This is another paragraph in the div.</p> </div> <br> <button>刪除 div 元素</button> </body> </html>
檢視返回的物件：返回刪除所有的元素
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var obj=$("#div1").remove(); $("body").append(obj); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;"> This is some text in the div. <p>This is a paragraph in the div.</p> <p>This is another paragraph in the div.</p> </div> <br> <button>刪除 div 元素</button> </body> </html>
remove() 方法也可接受一個引數，允許您對被刪元素進行過濾。該引數可以是任何 jQuery 選擇器的語法。
下面的例子刪除 class="italic" 的所有 <p> 元素：
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").remove(".italic"); }); }); </script> </head> <body> <p>This is a paragraph in the div.</p> <p class="italic"><i>This is another paragraph in the div.</i></p> <p class="italic"><i>This is another paragraph in the div.</i></p> <button>刪除 class="italic" 的所有 p 元素</button> </body> </html>
（2）、empty()刪除匹配的元素集合中所有的子節點
empty() 方法從被選元素移除所有內容，包括所有文字和子節點。
語法：$(selector).empty()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").empty();
});
});
</script>
</head>
<body>
<p style="width:200px;height:200px;background-color:yellow">This is a paragraph. <b>Bold</b> and <i>italic</i> text.</p>
<button class="btn1">刪除 p 元素的內容</button>
</body>
</html>
檢視返回的物件：返回的物件不包括刪除的子元素，只保留節點。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
var obj=$("p").empty();
$("body").append(obj)
});
});
</script>
</head>
<body>
<p style="width:200px;height:200px;background-color:yellow">This is a paragraph. <b>Bold</b> and <i>italic</i> text.</p>
<button class="btn1">刪除 p 元素的內容</button>
</body>
</html>
（3）、detach() 從 DOM 中移除匹配元素集合
detach() 方法移除被選元素，包括所有文字和子節點。這個方法會保留 jQuery 物件中的匹配的元素，因而可以在將來再使用這些匹配的元素。detach() 會保留所有繫結的事件、附加的資料，這一點與 remove() 不同。
語法：$(selector).detach()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("body").append($("p").detach());
});
$("p").click(function(){
$(this).animate({fontSize:"+=1px"})
});
});
</script>
</head>
<body>
<p>在本段落移動之後，試著點選該段落，請注意它保留了 click 事件。</p>
<button>移動 p 元素</button>
</body>
</html>
二、使用jQuery複製元素
clone() 方法生成被選元素的副本，包含子節點、文字和屬性。
語法：$(selector).clone(includeEvents)
includeEvents可選。布林值。規定是否複製元素的所有事件處理。預設地，副本中不包含事件處理器。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("body").append($("p:first").clone(true));
});
$("p").click(function(){
$(this).animate({fontSize:"+=1px"});
});
});
</script>
</head>
<body>
<p>點選本段落可以增加文字的大小。事件處理器同樣被複制到新的段落。</p>
<button>複製每個 p 元素，然後追加到 body 元素</button>
</body>
</html>
三、使用jQuery替換元素
（1）、replaceAll()用匹配的元素替換所有匹配到的元素
replaceAll() 方法用指定的 HTML 內容或元素替換被選元素。提示：replaceAll() 與 replaceWith() 作用相同。差異在於語法：內容和選擇器的位置，以及 replaceWith() 能夠使用函式進行替換。
語法：$(content).replaceAll(selector)
content 必需。規定替換被選元素的內容。可能的值:
HTML 程式碼 - 比如 ("<div></div>")
新元素 - 比如 (document.createElement("div"))
已存在的元素 - 比如 ($(".div1")) ，已存在的元素不會被移動，只會被複制，幷包裹被選元素。
selector 必需。規定要替換的元素。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$(document.createElement("div")).replaceAll("p");
});
});
</script>
<style>
div{height:20px;background-color:yellow;margin:10px;}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">用新的 div 替換所有段落</button>
</body>
</html>
（2）、replaceWith()用新內容替換匹配的元素
replaceWith() 方法用指定的 HTML 內容或元素替換被選元素。提示：replaceWith() 與 replaceAll() 作用相同。差異在於語法：內容和選擇器的位置，以及 replaceAll() 無法使用函式進行替換。
語法：$(selector).replaceWith(content)
content 必需。規定替換被選元素的內容。可能的值:
HTML 程式碼 - 比如 ("<div></div>")
新元素 - 比如 (document.createElement("div"))
已存在的元素 - 比如 ($(".div1"))，已存在的元素不會被移動，只會被複制，幷包裹被選元素。
selector必需。規定要替換的元素。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").replaceWith("<b>Hello world!</b>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">用粗體文字替換所有段落</button>
</body>
</html>
使用函式來替換元素，使用函式把被選元素替換為新內容。
語法：$(selector).replaceWith(function())
function()必需。返回待替換被選元素的新內容的函式。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").replaceWith(function(){
return "<p>Hello World!</p>";
});
});
});
</script>
</head>
<body>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
<button class="btn1">用新的 p 元素替換所有段落</button>
</body>
</html>