如何让我的 JavaScript 删除函数多次触发？

Question

I'm building a todo app and I use a function to create a list item entered by the user.

There is an event listener added to the output section to listen for a delete button click for each item displayed. My problem is that the delete button is only working for one item and then it stops working.

In the console, it appears that the function is actually called every time I press the button, but the functionality only works for one click. Do I need to add all the list items into an array perhaps?

 const todo = document.getElementById('todo'); const enter = document.getElementById('enter'); const output = document.getElementById('output'); enter.addEventListener('click', () => { listItem(todo); }); let createListItem; var deleteBtn; let checkBtn; function listItem(todo) { createListItem = document.createElement('li'); createListItem.innerText = todo.value; todo.value = ''; output.appendChild(createListItem); checkBtn = document.createElement('button'); deleteBtn = document.createElement('button'); checkBtn.innerText = 'check'; deleteBtn.innerText = 'delete'; createListItem.append(checkBtn); createListItem.append(deleteBtn); checkBtn.classList.add('checkBtn'); deleteBtn.classList.add('deleteBtn'); } output.addEventListener('click', deleteFunc); function deleteFunc() { console.log('function called'); createListItem.remove(); }

 <section class="controls"> <div> <label for="todo">Enter a to-do</label> <input type="text" name="todo" id="todo"> </div> <span> <button id="enter" class = "enter"><i class="fas fa-paper-plane"></i></button> </span> </section> <section> <ul id="output" class="output"> </ul> </section>

Answer 1

You need to delegate and use relative addressing because your code only removes the LAST added LI

The variable createListItem pollutes the global scope. Add the keyword var or let in the listItem function too

function deleteFunc(e) {
  console.log('function called');
  const tgt = e.target;
  if (e.target.innerText==="delete") tgt.closest("li").remove()
}

Added benefit from this delegation is that adding the functionality to the "check" button is just

  if (e.target.innerText==="check") ...

I would recommend to use a class and testing

if (e.target.classList.contains("delete") 

instead of the innerText - especially if you want to change language of the button

 const todo = document.getElementById('todo'); const enter = document.getElementById('enter'); const output = document.getElementById('output'); enter.addEventListener('click', () => { listItem(todo); }); let createListItem; var deleteBtn; let checkBtn; function listItem(todo) { let createListItem = document.createElement('li'); // use let or var here createListItem.innerText = todo.value; todo.value = ''; output.appendChild(createListItem); checkBtn = document.createElement('button'); deleteBtn = document.createElement('button'); checkBtn.innerText = 'check'; deleteBtn.innerText = 'delete'; createListItem.append(checkBtn); createListItem.append(deleteBtn); checkBtn.classList.add('checkBtn'); deleteBtn.classList.add('deleteBtn'); } output.addEventListener('click', deleteFunc); function deleteFunc(e) { console.log('function called'); const tgt = e.target; if (e.target.innerText==="delete") tgt.closest("li").remove() }

 <section class="controls"> <div> <label for="todo">Enter a to-do</label> <input type="text" name="todo" id="todo"> </div> <span> <button id="enter" class = "enter"><i class="fas fa-paper-plane"></i></button> </span> </section> <section> <ul id="output" class="output"> </ul> </section>

Answer 2

Your createListItem variable is a global that gets set to the most-recently appended item, so the delete function will always delete the most-recent item. Once an element el has already been removed from the DOM tree, el.remove() is a no-op, so it only works once.

To fix, you can either use event delegation as in @mplungjan's answer or assign a unique id to each list item and pass that as a parameter to the function to determine what to delete.

Example of the second approach:

<ul>
  <li id="item-0"></li>
  <li id="item-1"></li>
  <li id="item-2"></li>
</ul>

const deleteById = id => document.querySelector(`#item-${id}`).remove()

Answer 3

First though:

I think os because you are targeting the "ul" instead the "li" elements. Try adding the event listeners to each "li" element with a querySelectorAll() instead of targeting "output" directly.

Answer 4

When you add another item, you call listItem() which sets a new value to createListItem . This means, when you call deleteFunc() , createListItem.remove(); is only executed on the last element you have added. If this item was already removed, your out of luck as well.

function deleteFunc(e) {
  console.log('function called');
  const { target } = e; // get target
  target.closest("li").remove()
}

Remove the listener on output . (This line: output.addEventListener('click', deleteFunc); )

And add the listener to each deleteBtn :

checkBtn.classList.add('checkBtn');
deleteBtn.classList.add('deleteBtn');
deleteBtn.addEventListener('click', deleteFunc);

This might help you: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

Answer 5

Find the solution.

 const todo = document.getElementById('todo'); const enter = document.getElementById('enter'); const output = document.getElementById('output'); enter.addEventListener('click', () => { listItem(todo); }); let createListItem; var deleteBtn; let checkBtn; var index = 0; function listItem(todo) { createListItem = document.createElement('li'); createListItem.innerText = todo.value; createListItem.id= 'li' + index; todo.value = ''; output.appendChild(createListItem); checkBtn = document.createElement('button'); deleteBtn = document.createElement('button'); checkBtn.innerText = 'check'; deleteBtn.innerText = 'delete'; deleteBtn.id = 'btn' + index; createListItem.append(checkBtn); createListItem.append(deleteBtn); checkBtn.classList.add('checkBtn'); deleteBtn.classList.add('deleteBtn'); deleteBtn.onclick = function() { deleteFunc(this); }; index += 1; } //output.addEventListener('click', deleteFunc); function deleteFunc(e) { var rowId = e.id.replace('btn',''); var row = document.getElementById('li'+rowId); console.log('function called' + rowId); //alert(rowId); if (row != null) { row.remove(); } //console.log('function called'); //createListItem.remove(); }

 <section class="controls"> <div> <label for="todo">Enter a to-do</label> <input type="text" name="todo" id="todo"> </div> <span> <button id="enter" class = "enter"><i class="fas fa-paper-plane"></i></button> </span> </section> <section> <ul id="output" class="output"> </ul> </section>