F2E

jQuery 3種 刪除元素（remove、empty、unwrap）

.remove() 刪除現存的元素（整個刪除）

1
2
3
$(function() {
  $('#banner').remove();
})
1
2
3
4
5
6
7
8
9
10
<!-- 執行前 -->
<p>蛋糕</p>
<p>泡芙</p>
<p>布丁</p>
<p id='banner'>banner</p>

<!-- 執行後 -->
<p>蛋糕</p>
<p>泡芙</p>
<p>布丁</p>

.empty() 刪除現存的元素（刪除元素內容）

1
2
3
$(function() {
  $('#banner').empty();
})
1
2
3
4
5
6
7
8
9
10
11
<!-- 執行前 -->
<p>蛋糕</p>
<p>泡芙</p>
<p>布丁</p>
<p id='banner'>banner</p>

<!-- 執行後 -->
<p>蛋糕</p>
<p>泡芙</p>
<p>布丁</p>
<p id='banner'></p>

.unwrap() 刪除被現存元素包覆的元素（把wrap元素刪除）

1
2
3
4
$(function() {
  $('p').wrap('<div class="wp"></div>');
  $('p').unwrap();
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 執行前 -->
<p>蛋糕</p>
<p>泡芙</p>
<p>布丁</p>

<!-- 執行 .wrap('<div class="wp"></div>') -->
<div class="wp"><p>蛋糕</p></div>
<div class="wp"><p>泡芙</p></div>
<div class="wp"><p>布丁</p></div>

<!-- 執行 .unwrap() -->
<p>蛋糕</p>
<p>泡芙</p>
<p>布丁</p>