Javascript DOM，如何确定触发了哪个事件监听器？

Question

我不太确定如何在标题中表达我的主要问题，但我会尽力在这里解释。我正在创建一个 JavaScript 应用程序，它接受用户输入，然后将其作为列表项添加到列表中。我希望每个列表项都有一个按钮，按下该按钮将删除相应的列表项。这是我的代码:

function addToList(){
  removeBtn = document.createElement('button');

  listItem = document.createElement('li');
  listItem.textContent = row[0]+ ' $' + row[1]+ ' ' + row[2]+' ';

  removeBtn.addEventListener('click', removeLi);

  listItem.appendChild(removeBtn);

  list.append(listItem);
}

我已经尝试了一些方法，但我只是不知道要在我的removeLI函数中放入什么来删除父项 <li>被点击的按钮的。任何帮助将不胜感激

Answer 1

使用事件目标并引用最接近的 li 元素

function removeLi(event) {
  event.target.closest('li').remove()
}

var list = document.querySelector("#list")

function addToList(text){
  var removeBtn = document.createElement('button');

  var listItem = document.createElement('li');
  listItem.textContent = text

  removeBtn.addEventListener('click', removeLi);

  listItem.appendChild(removeBtn);

  list.append(listItem);
}

addToList(1)
addToList(2)
addToList(3)

<ul id="list"></ul>