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 替換、取代字串