Strike-through on click

Question

Is there a css-way to make a onclick strike-through button. So when you click a button(piece of text) selected links will get the strike-through text-decoration?

Attached image as explanation.

Answer 1

Pure CSS simulating a button. When clicked, the paragraph turns red with strikethrough.

input[id=cb] {
  display: none;
}

input[id=cb]:checked~p.strikethrough {
  text-decoration: line-through;
  color: red;
}

label {
  border: thin solid darkgray;
  border-radius: 5px;
  padding: 10px;
  display: inline-block;
  margin-top: 5px;
}

<input name="cb" type="checkbox" id="cb">
<label for="cb">Click me</label>
<p class="strikethrough">Paragraph 1</p>
<p>Paragraph 2</p>
<p class="strikethrough">Paragraph 3</p>

Answer 2

You can achieve this on any element using JS. Also, not only you can strike onClick but also remove the striked content back to its original state.

$(function(){
  var $curParent, Content;
  $(document).delegate("span","click", function(){
    if($(this).closest("s").length) {
      Content = $(this).parent("s").html();
      $curParent = $(this).closest("s");
      $(Content).insertAfter($curParent);
      $(this).closest("s").remove();
    }
    else {
      $(this).wrapAll("<s />");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span>click</span>/<span>click</span>
</div>