将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);

var input=document.querySelector（'input[name=todoItem]'），
btnAdd=document.querySelector（'button[name=add]'），
btnClear=document.querySelector（'button[name=clear]'），
列表=document.querySelector（'.todo'），
storeList=[]；
函数renderTodos（）{
var el=document.createElement（'li'），
x=document.createElement（'button'）；
listLength=storeList.length；
//设置删除按钮的文本
x、 innerHTML='x'；
对于（变量i=0；i

---

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

eventListener

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

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

或者，您可以保持RenderToOS代码不变，并将删除委托给父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);
  }
}

---

基本上，您要做的是在父容器上添加一个事件，然后等待事件冒泡，并确定事件是否源自您的x标记，以及它是否是，然后触发回调函数。。这是我认为大多数图书馆使用的概念

---

或者使用jQuery这样的库，为什么要解决别人已经解决的问题呢

//一个click hadler被添加到#mylist中，该列表已经存在于dom中
document.querySelector（“#mylist”）.addEventListener（'click'，函数（e）{
//假设'x'在span中，并且它是'li'中唯一的span，我们可以检查它，我们可以进一步改进此检查，以确保我们实际单击了删除按钮
如果（e.target.tagName=='SPAN'）{
//如果是这样，那么由于我们知道结构，我们可以删除目标的父节点，即span元素
e、 target.parentNode.parentNode.removeChild（e.target.parentNode）；
}
}，假）；
//请原谅在这里使用jQuery
对于（变量i=0；i<10；i++）{
$（“
”{
正文：i
}).append（'X'）.appendTo（'#mylist'）；
}

只要单击add按钮，RenderToOS就会添加列表项和x按钮，这就是它应该做的。我只需要弄清楚如何单击添加的x按钮来删除关联的列表项。我真的不明白你的意思。当我查看dev工具并向列表中添加多个项目时，每次单击add按钮都会显示一个列表项目和创建的按钮。每次我点击清除按钮，它就会删除所有的li和按钮。没有新元素被创建是什么意思？抱歉，如果我遗漏了一些我不太理解的简单内容，我遗漏了

list.appendChild（el）。它所做的是每次循环浏览storeList的所有成员，您看到的唯一一个是最后一个。您不需要for循环，也不需要“呈现空列表”。长度为零的数组上的for循环不起任何作用。此站点上的所有内容都归结为使用jquery。为什么要在这么小的东西上使用jquery？只为一些相对简单的事情添加一个完整的库，这似乎是不必要的。这个项目的重点是我试图学习和理解javascripts本身中的事件。如果我不能在普通javascript中实现jquery，我将永远无法理解它到底在做什么。感谢您对父容器的解释，这确实有一点帮助。我有一种想法，我需要这样做，我只是不知道怎么做。你知道什么是什么吗！！！！你为什么不实施它呢！我看不到你有什么企图。。你想让我们对你遇到的每一个问题都进行填鸭式的处理吗？涉及的问题太多了，很难做到正确（适用于所有浏览器、控件），这就是为什么人们使用/推荐经过测试的解决方案，而不是每次都推出自己开发的解决方案。看起来人们正忙于保存28kb的数据，但不介意使用document.addEventListener等javascript代码，我知道这是什么。你不需要帮助，如果你觉得有义务回答这里的每一个问题，以获得更高的声誉，并对自己作为一名程序员感到满意，那么很抱歉。我是新手，还不了解很多事情。我以为这就是这个网站的目的。正如问题中所述，我曾尝试以各种方式实现这一点，但我所拥有的一切都不接近或看起来都不正确，因此，如果这只是为了让读者更难阅读并了解问题所在，为什么还要发布它呢。我不想逐行逐行地给出答案，只想知道如何使用target。谢谢你，这就是我一直在寻找的帮助！只是som