在前幾天的實作中，我們已經完成了前端 CRUD (新增 Create、讀取 Read、更新 Update、刪除 Delete) 中的前三項。今天，我們要來完成最後一塊拼圖——「刪除」功能，讓使用者可以移除建立錯誤的用藥排程。

在 React 中處理陣列刪除時，我們不能像傳統 JavaScript 那樣使用 splice 直接修改原陣列（這會破壞 React 的不可變性 Immutability 規則），而是要利用 filter 陣列方法，過濾掉不要的資料並回傳一個全新的陣列。

Step 1：撰寫刪除邏輯 (Delete)
打開 src/components/MedicationList.jsx。因為昨天我們已經把 setMedications 透過 Props 傳進來了，所以我們可以直接在這個元件裡面撰寫刪除函數。
在 confirmTakeMedication 函數的下方，新增這個 handleDelete 函數。為了避免誤觸，我們加入瀏覽器內建的 window.confirm 做最簡單的防呆對話框：

Step 2：在介面上加入「刪除按鈕」
接著往下捲動到 return 的區塊，找到 medications.map 迴圈裡面，原本放「已服用 / 確認服用」按鈕的地方。
我們要在外層套用一個 flex items-center space-x-3 的容器，並在狀態標籤的旁邊加上一個簡單的垃圾桶按鈕。
更新按鈕區塊的程式碼如下：

成功之後你會在確認鍵旁邊看到一個垃圾桶標示，點擊之後就會刪除你新增那筆的資料