如何在列表中添加删除按钮？

<ul id="list">
  <li>
    Item 1
    <button class="delete-btn" data-id="1">删除</button>
  </li>
  <li>
    Item 2
    <button class="delete-btn" data-id="2">删除</button>
  </li>
  ...
</ul>

.delete-btn {
  background-color: red;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

// 获取所有的删除按钮
const deleteButtons = document.querySelectorAll('.delete-btn');

// 为每个按钮添加点击事件处理程序
deleteButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 获取按钮所在的列表项
    const listItem = button.parentNode;
    // 从列表中删除该项
    listItem.remove();
  });
});