---
# System prepended metadata

title: "\U0001F3C5Day19 - todolist 實作篇：刪除資料功能"

---

# 🏅Day19 - todolist 實作篇：刪除資料功能


## 刪除資料

在刪除資料的時候，我們通常會使用 `DELETE` 的方式，整體的操作跟新增資料很像，

只是 API 的後方通常會帶上要刪除此產品的 id：

```
const url = "example/api"

axios.delete(`url/${ 要刪除產品的 id }`, {
    headers: {
      Authorization: token.value,
    },
  })
  .then(response => {
    console.log('資料刪除成功:', response.data);
  })
  .catch(error => {
    console.error('資料刪除時發生錯誤:', error);
  });
```

題目
---
操作 [這個模板](https://codepen.io/yen-kg/pen/MWMbgXd)，執行以下要求（只能操作 script 的部分）：

* 完成刪除資料功能，並且刪除成功時能夠更新畫面。

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：
const deleteTodo = async(id) => {
  const response = await axios.delete(`${api}/todos/${id}`, {
    headers: {
      Authorization: token.value,
    },
  });
  getTodos();
}
-->

回報區
---

|     Discord      |                           CodePen / 答案                            |
|:----------------:|:-------------------------------------------------------------------:|
  
<!-- 

 | user | [CodePen]() |

-->