delete button not working todo list DOM

Question

I swear I scoured the forum for a solution, but I honestly just started learning Javascript a few days ago so I am not very good at deducing solutions from different code and using the logic on my own. Total noob I am.

I want my delete button to delete the item it is assigned to when clicked. I do not understand why my deleteMe() function doesn't do anything.

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var listItem = document.querySelectorAll("li");
var dlt = document.getElementsByClassName(".delete")


function deleteMe() {
    dlt.addEventListener("click", function() {
        this.removeChild();
    })
}


function delButton(parent) {
    var del = document.createElement("button");
    del.appendChild(document.createTextNode("Done!"));
    parent.appendChild(del);
    button.className = "delete";
        }




function addToggle() {
    this.classList.toggle("done");
}

function addEntry() {
    if (input.value.length > 0 ) {
    var newItem = document.createElement("li");
    newItem.appendChild(document.createTextNode(input.value));
    ul.appendChild(newItem);
    input.value="";
    newItem.addEventListener("click",addToggle);
    delButton(newItem);
                }
    }


for ( var i = 0 ; i < listItem.length; i++) {
    listItem[i].addEventListener("click", addToggle);
    delButton( listItem[i]);
    }


button.addEventListener("click", addEntry);
input.addEventListener("keypress", function() {
    if ( event.keyCode === 13 ) {
    addEntry()}
});

I would really really appreciate if someone could explain what I am doing wrong. Thank you!

Answer 1

dlt is currently an HTMLCollection, not an element, so you can't add an event listener to it. Either select an element from it first (such as through iteration), or even better, assign the listener to the container , and have the listener check to see if the clicked target's className is delete . I would add the listener to the ul , just once, near the beginning of your script:

ul.addEventListener('click', (e) => {
  // e.target represents the clicked element
  if (e.target.className !== 'delete') return;
  e.target.parentElement.remove();
});

If you wanted to assign a separate listener to each delete , you would have to add the listener inside delButton , like so:

function delButton(parent) {
  var del = parent.appendChild(document.createElement("button"));
  del.textContent = 'Done!';
  button.className = "delete";
  button.addEventListener('click', () => button.parentElement.remove());
}