jQuery 刪除元素｜方法與比較：.empty()、.remove()、.detach() │ 架站盒子

jQuery 有三種方法可以刪除元素與字串，分別是.empty()、.remove()和.detach()，根據需求可以選擇其中一種來執行，以下就來說明這三種用法的差異。

補充：如果是要在字串中移除部分字串，例如「歡迎常來架站盒子」改為「歡迎常來 kumo.tw」，請參考：JavaScript 替換、取代字串

.empty()

.empty()是指移除元素中所有內容，包含文字、子元素等。


<div class="box">
  <div class="title">架站盒子</div>
  <div class="description">kumo.tw</div>
</div>

加上 jQuery 的.empty()：


$(".title").empty();

HTML將會變成如下：


<div class="box">
  <div class="title"></div>
  <div class="description">kumo.tw</div>
</div>

如果<div class="title"></div>中還有HTML標籤也會一併被移除，例如<div class="title"><div class="text">架站盒子></div></div>也會變成<div class="title"></div>。

實際操作：

可以按F12查看原始碼的變化狀態。

剛剛的.empty()是移除元素中的內容，而.remove()則是連該元素都一起移除，因此<div class="title"></div>也會不見。


<div class="box">
  <div class="title">架站盒子</div>
  <div class="description">kumo.tw</div>
</div>

加上 jQuery 的. remove()：


$(".title"). remove();

HTML將會變成如下：


<div class="box">
  <div class="description">kumo.tw</div>
</div>

實際操作：

See the Pen Untitled by kumo (@kumo-tw) on CodePen.

. detach()和. remove()一樣都是移除元素內所有內容，包含該元素，但不同的是，它的元素事件仍然存在。

如果是要在字串中移除部分字串，例如「歡迎常來架站盒子」改為「歡迎常來 kumo.tw」，可以使用替換方法，請參考：JavaScript 替換、取代字串