How to get a Javascript Function to work on newly created elements?

Question

I'm making a 2do app as a personal project. I've gotten the code to delete the lis and add new lis, but The new lis will not remove themselves when I click on the 'x' span.

// delete done todos
for (var i = 0; i < deleteTodo.length; i++) {
  deleteTodo[i].addEventListener('click', function(e) {
    this.parentNode.remove();
  });
}

// add a todo task
input.addEventListener('keypress', function(e) {
  if (event.keyCode === 13) {
    var newTodo = input.value;
    var newLi = document.createElement('li');
    newLi.innerHTML = '<span>X</span> ' + newTodo;
    this.value = '';
    console.log(newLi);
    ul.appendChild(newLi);
  }
});

`document.getElementById("container").addEventListener('click', function(e) { if (e.target.tagName==="SPAN") this.parentNode.remove(); });` — mplungjan, Sep 16 '19 at 18:00

score 0 · Answer 1 · answered Sep 16 '19 at 17:59

0

You want to delegate the event.

document.addEventListener('click', (event)=>{
    if(event.target.matches('li')){
        // this will fire on any li tags that are clicked, even if dynamically added
    }
})

answered Sep 16 '19 at 17:59

Gavin

2,214
2
18
26

How to get a Javascript Function to work on newly created elements?

1 Answers1