Adding and adding <s> tags (scrolling) to table data when a check box is selected

Question

I am trying to use jQuery to convert everything to the "tableEntry" class to cross out the text (using the "s" tags) when I click on the checkmark. I'm currently having problems adding and adding tags to the text shown in the "tableEntry" class. How can I accomplish this using jQuery?

Any help would be appreciated, thanks in advance!

HTML:

<tr> 
  <td><input type="checkbox" /></td>
  <td><span class="tableEntry">Walk the Dog</span></td>
</tr>

jQuery:

$(document).ready(function () {
  $(document).on("change", "input:checkbox", function () {
    // ...
  });
});

Answer 1

The best way to do this is with CSS.

You can switch the class to an element and use text-decoration: line-throughto achieve this.

Example here

$(document).on("change", "input:checkbox", function () {
  $(this).parent().next().find('span').toggleClass('strike');
});

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

---

/ <s> ( ), :

$(document).on("change", "input:checkbox", function () {
  var $span = $(this).parent().next().find('span');

  this.checked ? $span.wrap('<s></s>') : $span.unwrap();
});