动态元素onclick函数

Question

I was wondering what's the shortest & fastest way to add an event listener for dynamically created HTML elements on this following structure, only pure JS allowed. This is the HTML structure :

<div class="container">
  <h1> To Do List </h1>
  <input type="text" id="userInput" />
  <ul id="todosHolder">
    <li><span class="delete">X</span> Foo </li>
    <li><span class="delete">X</span> Whatever </li>
    <li><span class="delete">X</span> Yeah sure </li>
    <li><span class="delete">X</span> Bar </li>
  </ul>
</div>

this is the JS structure

// Check && uncheck todos by clicking

let li = document.querySelectorAll('li');

for( let i = 0; i < li.length; i++ ) {
  li[i].addEventListener('click', function() {
    this.classList.toggle('completed');
  });
}

//Click "X" to delete a todo
let x = document.querySelectorAll('.delete');
for( let i = 0; i < x.length; i++ ) {
  x[i].addEventListener('click', function(){
      this.parentElement.remove();
  });
}

// listen for 'enter' keypress
let inputListener = document.getElementById('userInput');
inputListener.addEventListener('keypress',function(event) {
    if(event.which === 13) {
        var inputText = this.value;
        this.value = "";
        //create new li and add it to ul
        var ul = document.getElementById('todosHolder');
        ul.insertAdjacentHTML('beforeend','<li><span class="delete">X</span> ' + inputText + '</li>');
    }
});

Answer 1

You can put a listener on the parent to handle the events of the children.

 //put an event listener on the parent ul document.getElementById('todosHolder').addEventListener('click', function(e){ //if the delete was clicked, remove the li if (e.target.classList.contains('delete')) { e.target.parentElement.remove(); } else if (e.target.tagName === 'LI') { //if the li was clicked, toggle the class e.target.classList.toggle('completed'); } }); // listen for 'enter' keypress let inputListener = document.getElementById('userInput'); inputListener.addEventListener('keypress', function(event) { if (event.which === 13) { var inputText = this.value; this.value = ""; //create new li and add it to ul var ul = document.getElementById('todosHolder'); ul.insertAdjacentHTML('beforeend', '<li><span class="delete">X</span> ' + inputText + '</li>'); } }); 

 .completed { color: red; } 

 <div class="container"> <h1> To Do List </h1> <input type="text" id="userInput" /> <ul id="todosHolder"> <li><span class="delete">X</span> Foo </li> <li><span class="delete">X</span> Whatever </li> <li><span class="delete">X</span> Yeah sure </li> <li><span class="delete">X</span> Bar </li> </ul> </div>