javascript - 将eventListener附加到javascript中的动态元素

我正在创建待办事项列表，并且在添加新列表项时动态添加了li和button标签。该按钮是x，应该删除列表项。我已经尝试了几件事，但无法弄清楚如何为每个单独的x按钮创建一个eventListener并在单击时删除相应的列表项。

renderTodos函数是在其中创建所有动态添加的内容的地方。我为每个按钮设置了一个数据索引，试图在其中访问每个按钮以在每个动态按钮上附加一个eventListener，但是我不确定如何实现。根据我的阅读，应该有一种使用currentTarget或事件目标来执行此操作的方法，但我不知道它是如何工作的。

var input = document.querySelector('input[name=todoItem]'),

btnAdd = document.querySelector('button[name=add]'),
btnClear = document.querySelector('button[name=clear]'),
list = document.querySelector('.todo'),
storeList = [];

function renderTodos(){
  var el = document.createElement('li'),
  x = document.createElement('button');
  listLength = storeList.length;

  //Set text for remove button
  x.innerHTML = 'x';

  for(var i = 0; i < listLength; i++){
    el.innerHTML = storeList[i];
    list.appendChild(el);
    x.setAttribute('data-index', i);
    el.appendChild(x);
  }

  // check for correct data-index property on x button
}

function addTodos(){
  storeList.push(input.value);

  // Check that input is getting pushed to list array
  console.log(storeList);
  renderTodos();
}


function clearList(){
  // make list empty
  list.innerHTML = '';
  storeList.splice(0, storeList.length);
  //render empty list
  renderTodos();

  //Check that list array is empty
  console.log(storeList);
}

btnAdd.addEventListener('click', addTodos);
btnClear.addEventListener('click', clearList);

到目前为止，列表上的所有其他内容都有效，我只是不知道如何实现此eventListener。

最佳答案

您可以使用以下方法将侦听器添加到每个按钮：

 x.innerHTML = '';
 x.onclick = function(){
   var node = this.parentNode;
   node.parentNode.removeChild(node);
 };

或者，您可以按原样保留renderTodos代码，并将remove委托给父UL：

// Add the listener
list.addEventListener('click', removeItem);

// The listener function
function removeItem(event) {
  var node = event.target;

  // Check that the click came from an X button
  // better to check against a class name though
  if (node.tagName &&
      node.tagName.toLowerCase() == 'button' &&
      node.innerHTML == 'x') {
    node = node.parentNode;
    node.parentNode.removeChild(node);
  }
}

关于javascript - 将eventListener附加到javascript中的动态元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26667109/