之前在專案上有使用到 hide() 語法，將元素隱藏，但這次因為是用 table 表單記錄資料，為了正確刪除資料而不是隱藏 DOM 元素，使用 remove() 將該元素從網頁刪除。
hide()
使用 hide()的話，可以打開瀏覽器會看到透過按鈕隱藏的 DOM 元素，變成了 display:none; 這代表網頁只是將其隱藏而非刪除，在畫面上雖然都消失了，但因 hide() 的權重較高，比較不建議這樣做「刪除」的動作。
HTML
1
2
| <button class="btn jq-removeBtn">Remove</button>
<p class="text">這是一段文字，點擊按鈕後我會被隱藏。</p>
|
JS
1
2
3
4
| $(".jq-removeBtn").click(function (e) {
e.preventDefault();
$(".text").hide();
});
|
remove()
採用 remove() 就真的是將 DOM 元素從網頁移除。這邊練習一個常見的 table 表單寫法，下方有個表單結構與樣式，並且要在點擊按鈕後刪除自身該筆資料。
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| <table>
<thead>
<tr>
<th>NAME</th>
<th>PHONE</th>
<th>EMAIL</th>
<th>OHTER</th>
<th>DELETE</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tim</td>
<td>0912-345678</td>
<td>tim@email.com</td>
<td></td>
<td><button class="btn jq-delete">刪除</button></td>
</tr>
<tr>
<td>Tim</td>
<td>0912-345678</td>
<td>tim@email.com</td>
<td></td>
<td><button class="btn jq-delete">刪除</button></td>
</tr>
<tr>
<td>Tim</td>
<td>0912-345678</td>
<td>tim@email.com</td>
<td></td>
<td><button class="btn jq-delete">刪除</button></td>
</tr>
<tr>
<td>Tim</td>
<td>0912-345678</td>
<td>tim@email.com</td>
<td></td>
<td><button class="btn jq-delete">刪除</button></td>
</tr>
</tbody>
</table>
|
JS
當我綁定按鈕並給予點擊事件後，讓他找到按鈕自己，然後再找到 td，再找到 tr，然後把 tr 移除，就完成把表單資料的移除功能囉!
1
2
3
| $(".jq-delete").click(function () {
$(this).parent().parent().remove();
});
|