为按钮添加EventListener函数，获取父LI的ID并移除对应DOM元素

嘿，我来帮你搞定这个问题！其实获取父li的ID有几种简单的方式，结合你的需求，我给你两种实用的解决方案：

方法一：用事件委托 + closest() 查找父元素 #

这种方法特别适合动态生成的元素，不用给每个按钮单独绑定事件，效率更高：

首先，假设你已经有一个客户端列表数组，动态生成li的代码大概是这样：

// 示例客户端列表
const clients = [
  { id: "client-001", name: "张三的客户端" },
  { id: "client-002", name: "李四的客户端" }
];
const clientList = document.querySelector("#your-ul-id");

// 动态生成每个客户端的li项
clients.forEach(client => {
  const li = document.createElement("li");
  li.id = client.id; // 给li设置唯一ID
  // 填充li内容，包含移除按钮
  li.innerHTML = `
    <div>客户端名称：${client.name}</div>
    <button class="btna">移除该客户端</button>
  `;
  clientList.appendChild(li);
});

接下来给ul绑定点击事件，利用事件委托处理按钮点击：

clientList.addEventListener("click", (e) => {
  // 判断点击的是移除按钮
  if (e.target.classList.contains("btna")) {
    // 找到最近的父li元素
    const targetLi = e.target.closest("li");
    const clientId = targetLi.id; // 获取li的ID

    // 1. 移除当前li元素
    targetLi.remove();

    // 2. 从客户端列表中删除对应项
    clients = clients.filter(item => item.id !== clientId);

    // 3. 删除DOM中的另一个元素（假设这个元素的ID和客户端ID关联，比如`client-detail-${clientId}`）
    const relatedElement = document.querySelector(`#client-detail-${clientId}`);
    if (relatedElement) {
      relatedElement.remove();
    }
  }
});

closest('li')会向上遍历DOM树，找到距离按钮最近的li父元素，不管按钮在li里嵌套多少层都能生效，非常靠谱。

方法二：生成按钮时直接绑定ID参数 #

如果你更习惯给每个按钮单独绑定事件，也可以在生成按钮的时候，直接把客户端ID传入事件处理函数：

clients.forEach(client => {
  const li = document.createElement("li");
  li.id = client.id;
  
  const removeBtn = document.createElement("button");
  removeBtn.className = "btna";
  removeBtn.textContent = "移除该客户端";
  
  // 绑定点击事件，直接使用当前client的ID和li元素
  removeBtn.addEventListener("click", () => {
    // 移除li
    li.remove();
    // 更新客户端列表
    clients = clients.filter(item => item.id !== client.id);
    // 删除关联的其他元素
    const relatedElement = document.querySelector(`#client-detail-${client.id}`);
    if (relatedElement) relatedElement.remove();
  });

  li.appendChild(document.createTextNode(`客户端：${client.name}`));
  li.appendChild(removeBtn);
  clientList.appendChild(li);
});

这种方式更直观，因为在生成元素的上下文里，你本来就有client.id和li的引用，直接用就行，不用额外查找。

两种方法都能完美解决你的需求，你可以根据自己的代码结构选更顺手的那个~

内容的提问来源于stack exchange，提问作者John O Sullivan