javascripthtmlcssline-through

Toggle Line-through on click in paragraph lines

I am trying to create an on-click line-through for a bunch of words (item #1, item #2, item #3). I want it to be line-through when clicked, and if the same word is clicked a second time the line-through should disappear again.

<p>
Item #1<br>
Item #2<br>
Item #3<br>
</p>

I would prefer css.

Solution

  • Each item text should be wrapped by a span to change its properties.

    Here is a simple demo using JQuery:

    $("#parg").find("span").click(function(){
     $(this).toggleClass("line-through");
});
    .line-through{
     text-decoration: line-through;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="parg">
<span>Item #1</span><br>
<span>Item #2</span><br>
<span>Item #3</span><br>
</p>