How to fix "toggle" e "classList" on JavaScript

I have a list to add a class, but just items after add by input works with toggle. The items in the code don’t work.

I wonder if is something related to "this" property too.

Link to CodePen.

https://codepen.io/kennedyrmenezes/pen/BaQRXMq

li.addEventListener("click", function() {
    var finished = this.classList.toggle("done");
    var removeButton = document.createElement("button");
    removeButton.classList.add("deleteButton");

    if (finished) {
        removeButton.appendChild(document.createTextNode("remove"));
        removeButton.classList = "deleteButton";
        li.appendChild(removeButton);

        removeButton.addEventListener("click", function() {
            this.parentElement.remove();
        });
    } else {
        this.getElementsByClassName("deleteButton")[0].remove();
    }
})

1 thought on “How to fix "toggle" e "classList" on JavaScript”

Leave a Comment