up
down
Close
架站盒子
Web Development Box
 

jQuery 刪除元素|方法與比較:.empty()、.remove()、.detach()

│ 3109 Views │ jQuery
jQuery 刪除元素|方法與比較:.empty()、.remove()、.detach()
jQuery 刪除元素|方法與比較:.empty()、.remove()、.detach()
  1. 「.empty()」的用法
  2. 「.remove()」的用法
  3. 「.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>

實際操作:

See the Pen jQuery empty() 刪除字串 by kumo (@kumo-tw) on CodePen.

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

.remove()

剛剛的.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()

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

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

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

延伸閱讀

本文是否對您有幫助?