jQuery 的 empty、remove 和 detach 的差別

小知識。

懶人包

• empty 不保留元素的內容
• remove 保留元素內容，但不保留監聽器
• detach 保留元素內容，並保留監聽器

簡述

其實這三個 method 都有回傳值，回傳值是 jQuery 物件，裡面會儲存元素的相關資訊：

HTML：

<div class="div-1">
  <p>Lorem ipsum dolor sit amet conse</p>
</div>
<div class="div-2">
  <p>Lorem ipsum dolor sit amet conse</p>
</div>
<div class="div-3">
  <p>Lorem ipsum dolor sit amet conse</p>
</div>

const returnValue1 = $('.div-1').empty()
const returnValue2 = $('.div-2').remove()
const returnValue3 = $('.div-3').detach()
console.log(returnValue1[0].innerHTML) // ''
console.log(returnValue2[0].innerHTML) // <p>Lorem ipsum dolor sit amet conse</p>
console.log(returnValue3[0].innerHTML) // <p>Lorem ipsum dolor sit amet conse</p>

三個都會保留原本 <div> 的資訊，但因為 empty 的作用是把所有內容給清除，因此留下的資訊也會是空的。

利用這點能做到把一個元素 remove() 後再放回去：

<div class="div-1">
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit</p>
</div>
<div class="div-2">
  <p>Lorem ipsum dolor sit amet conse</p>
</div>
<div class="div-3">
  <p>Lorem ipsum dolor sit</p>
</div>

// 儲存回傳值
let returnValue1
// 刪除元素
$('.btn-getAway').on('click', () => {
  returnValue1 = $('.div-1').remove()
})
// 利用回傳值來放回去
$('.btn-goBack').on('click', () => {
  // 先修改 <p> 的內容
  returnValue1.find('p').text('yo')
  // 再放回去
  $('.div-3').before(returnValue1)
})

輸出結果：

這樣的好處是不需要重新建立元素，原本的流程應該是：

1. 先 copy 要保留的內容
2. 建立新元素
3. 把 copy 的內容 paste 回新元素裡
4. 插回 DOM

利用上面的方法後就省事多了～

remove 跟 detach 的差別

其實最主要只有一點：會不會保留 Event Listener，前者會，後者不會。直接做個實驗你就懂了：

1. 用 remove 移除

<button class="btn-test">測試用按鈕</button>
<button class="btn-getAway">拿掉</button>
<button class="btn-goBack">放回去</button>

// 儲存回傳資訊
let returnValue
// 對要移除的元素設監聽器
$('.btn-test').on('click', () => {
  console.log('click!!')
})
// 移除
$('.btn-getAway').on('click', () => {
  returnValue = $('.btn-test').remove()
})
// 放回去
$('.btn-goBack').on('click', () => {
  $('.btn-getAway').before(returnValue)
})

輸出結果：

2. 用 detach 移除（其實只差在一行）

<button class="btn-test">測試用按鈕</button>
<button class="btn-getAway">拿掉</button>
<button class="btn-goBack">放回去</button>

// 儲存回傳資訊
let returnValue
// 對要移除的元素設監聽器
$('.btn-test').on('click', () => {
  console.log('click!!')
})
// 移除
$('.btn-getAway').on('click', () => {
  returnValue = $('.btn-test').detach()
})
// 放回去
$('.btn-goBack').on('click', () => {
  $('.btn-getAway').before(returnValue)
})

知道這些就差不多了！