jQuery 刪除 DOM 元素導致頁面跳轉頂部？阻止默認行為的三種姿勢

現象

點擊刪除鏈接 `$("ul li[id='1']").remove();` 後，頁面瞬間滾動到頂部。

根因

刪除鏈接通常寫作 `刪除`，點擊後觸發默認行為：`` 導致頁面跳轉到 `id="top"` 或文檔頂部。

1. inline onclick 返回 false（最簡單）
   `刪除`
2. href 使用 javascript:void(0)
   `刪除`
3. 事件綁定中 preventDefault（現代最佳實踐）
   

   $('#list').on('click', '.delete-btn', function(e) {
       e.preventDefault(); // 阻止默認跳轉
       var id = $(this).data('id');
       $(`ul li[id="${id}"]`).remove();
   });

為什麼方案 3 最好？

• HTML 與 JS 解耦，無內聯腳本。
• 支持動態添加的元素（事件委託）。
• 語義化：`刪除` 更合理，天然無跳轉行為。

最佳重構

<button type="button" class="delete-btn" data-id="1">刪除</button>

$('#list').on('click', '.delete-btn', function() {
    $(`ul li[id="${$(this).data('id')}"]`).remove();
});