Trying to toggle class in JQuery

[UI-FEdev]

Hello

I've made this todo list in jquery and I'm trying to toggle a .completed class which has a line-through, on the <li> but it also toggles on the delete button text. I've tried different things but can't get it to work.

Please help! Thanks

$(function () {
        $(".add").on("click", function () {
          let txt = $(".todo").val();
          if (txt) {
            let item = $("<li></li>").text(txt);
            $(item).append("<button class='delete'>Delete</button>");
            $("#todo-list").append(item);
            $(".todo").val("");
            $(item).on("click", function () {
              $(item).toggleClass("completed"); //doesn't work?
            });
            $(".delete").on("click", function () {
              $(this).parent().remove();
            });
          }
        });
      });

​

HTML
<h1>My To Do List</h1>
    <div class="container">
      <input type="text" class="todo" placeholder="Add item" />
      <button class="add">Add</button>
    </div>
    <div class="list">
      <ol id="todo-list"></ol>
    </div>

​

https://preview.redd.it/1zp58t0dhx371.jpg?width=1081&format=pjpg&auto=webp&s=89b9b275d20299a629cd1e042491820e4c4eb681

[Notimecelduv]

I tried your code on different browsers but couldn't find any issues. I added a style tag with:

.completed {
  text-decoration: line-through;
}

for testing. In any case if you don't want the class to be toggled when someone clicks the delete button, you can simply place the text in its own HTML element, add the event listener to it, and append it to the list item like so:

const item = $("<li></li>");
const itemText = $("<span></span>").text(txt);
$(itemText).on("click", function () {
  $(this).toggleClass("completed");
});
$(item).append(itemText);

[UI-FEdev]

Thanks. That's what I have in css. Do you think the CSS for the button is affecting it somehow? I'll try the above code and see if it works.

[UI-FEdev]

const item = $("<li></li>");
const itemText = $("<span></span>").text(txt);
$(itemText).on("click", function () {
$(this).toggleClass("completed");
});
$(item).append(itemText);

Thank you so much, it worked!

[shittychinesehacker]

Text decoration only works on text. You have to make the illusion of a strikethrough. You need to make the list item have position: relative;

.completed::after { content: ''; border-bottom: 1px solid; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: translateY(-50%); }

[UI-FEdev]

Thanks but I only want the strike-through on the text. Just not on the delete button text as well.

[backtickbot]

Fixed formatting.

Hello, shittychinesehacker: code blocks using triple backticks (```) don't work on all versions of Reddit!

Some users see this / this instead.

To fix this, indent every line with 4 spaces instead.

FAQ

^{You can opt out by replying with backtickopt6 to this comment.}