Kevin Powell - Community•16mo ago

how to make a todo list delete button work in javascript

Hello. I’m building a todo list app and need the delete button to delete each list everytime the delete button is clicked, but the problem is the delete function doesn’t even register the button clicked. I’ve done everything possible but nothing is working. The code is listed below. The add list function is the “addBtn” function. The delete function is the “iconBtn” function. I’ve tried putting the iconBtn function inside and outside the addBtn function but it still doesnt log the “button clicked” to the console like I specified Please help. I added the codepen below. CODE: https://codepen.io/Godswill-Obi-ndaji/pen/oNJYwmQ

Will ndaji

CodePen

Todo List

...

8 Replies

Jochem•16mo ago

it works fine on my machine

ᴋʙ•16mo ago

well first of all it duplicates the things we add to the list idk if that is supposed to happen

ᴋʙ•16mo ago

Will45OP•16mo ago

Does it log “button clicked” to the console when clicked?

Jochem•16mo ago

ah, I was checking the reset button so no, it's not logging, gimme a sec ah, that's a sneaky one! you've got these lines of code

  listItem.append(iconBtn);

  liArray.push(inputBox.value)
  listItem.innerHTML += `${liArray} `;

  listItem.append(iconBtn);

  liArray.push(inputBox.value)
  listItem.innerHTML += `${liArray} `;

You're adding the button to the list item element, as a dom element. Then on the last line there, you're taking the bare HTML contents of the listItem and appending HTML to it. The event is getting lost because it's not part of the innerHTML you can either use some other way to add the text (like appending a text node created by document.createTextNode()), or you can just set the innerHTML and then add the button

Will45OP•16mo ago

Oh my days, you’re an angel. You’re absolutely correct, it works now. Thanks a lot!🙌

Jochem•16mo ago

no worries, glad to help!

Will45OP•16mo ago

Its not. I’ve fixed it by using the index -1 on the length of the liAreay

Gaming

Programming

how to make a todo list delete button work in javascript