如何在列表中创建移除按钮

<ul id="list">
  <li>
    Item 1
    <button class="remove-btn" data-id="1">Remove</button>
  </li>
  <li>
    Item 2
    <button class="remove-btn" data-id="2">Remove</button>
  </li>
  <li>
    Item 3
    <button class="remove-btn" data-id="3">Remove</button>
  </li>
</ul>

// 获取所有的移除按钮
const removeButtons = document.querySelectorAll('.remove-btn');

// 为每个按钮添加点击事件监听器
removeButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 获取要移除的项的标识符
    const itemId = button.dataset.id;
    
    // 根据标识符找到要移除的项
    const itemToRemove = document.querySelector(`li[data-id="${itemId}"]`);
    
    // 移除该项
    itemToRemove.remove();
  });
});

.remove-btn {
  background-color: #ff0000;
  color: #ffffff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}