如何从数组列表中删除按钮单击时的列表视图项？

// HTML部分
<ul id="listView">
  <li>列表项 1 <button onclick="deleteItem(0)">删除</button></li>
  <li>列表项 2 <button onclick="deleteItem(1)">删除</button></li>
  <li>列表项 3 <button onclick="deleteItem(2)">删除</button></li>
</ul>

// JavaScript部分
let list = ["列表项 1", "列表项 2", "列表项 3"];

function deleteItem(index) {
  list.splice(index, 1); // 从数组中删除对应项

  renderListView(); // 重新渲染列表视图
}

function renderListView() {
  const listView = document.getElementById("listView");

  // 清空列表视图
  listView.innerHTML = "";

  // 根据更新后的数组重新生成列表项
  list.forEach(item => {
    const li = document.createElement("li");
    li.textContent = item;
    listView.appendChild(li);
  });
}