在前面幾天完成新增支出的功能後，我們的網頁還欠缺兩大功能：
1. 刪除：手殘打錯金額時，能隨時把錯誤資料清除。
2. 分類色彩標籤：讓不同的消費類別擁有專屬的顏色，提升辨識度。
今天我們透過簡短的 JavaScript DOM 操作，將這兩塊互動與美化功能補齊！

一、 實作刪除功能 (Delete)

在動態產生卡片時加入刪除按鈕，利用 .remove() 讓點擊時能即時刪除該筆支出：

// 在動態 HTML 中加入刪除按鈕
const newItem = document.createElement('div');
newItem.innerHTML = `
    <span>${name}: $${amount}</span>
    <button class="delete-btn">刪除</button>
`;

// 抓取卡片專屬的按鈕並綁定刪除事件
newItem.querySelector('.delete-btn').addEventListener('click', function() {
    newItem.remove(); 
});

二、 實作分類色彩標籤

利用 switch 判斷式，根據下拉選單的選項自動切換標籤與邊框顏色：

let badgeColor = '';
switch(category) {
    case 'food': badgeColor = '#efd1c5'; break;       
    case 'transport': badgeColor = '#c6d5e8'; break;   
    case 'entertainment': badgeColor = '#dac6e8'; break;
    case 'clothes': badgeColor = '#e8c6da'; break;      
    default: badgeColor = '#d4d8dd';                    
}
newItem.style.borderLeft = `4px solid ${badgeColor}`;