如何为多个列表视图元素制作两个按钮

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

<ul>
  <li>
    列表项1
    <button class="btn-edit">编辑</button>
    <button class="btn-delete">删除</button>
  </li>
  <li>
    列表项2
    <button class="btn-edit">编辑</button>
    <button class="btn-delete">删除</button>
  </li>
  <li>
    列表项3
    <button class="btn-edit">编辑</button>
    <button class="btn-delete">删除</button>
  </li>
</ul>

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

// 为编辑按钮添加点击事件监听器
editButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 执行编辑操作
    // ...
  });
});

// 为删除按钮添加点击事件监听器
deleteButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 执行删除操作
    // ...
  });
});