OrangePineapple OrangePineapple - 1 month ago 9
Javascript Question

click button does something, then click same button undo it

I'm trying to have a button create a line through a list but if you click it again it'll undo the line-through. I've tried a

.toggle()
but it did not work:

original code:

$("div").on("click", ".doneButt", function(e) {
e.preventDefault();
$(this).parents("li").css("text-decoration", "line-through");
});


.toggle attempt:

$(".doneButt").toggle(function() {
$(this).parents("li").css("text-decoration", "line-through");
}, function() {
$(this).parents("li").css("text-decoration", "none");
});

Answer

$(".doneButt").click(function() {
  $(this).parents("li").toggleClass('withline');
});
.withline {
  text-decoration: line-through
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>asdasdasda
    <input type='button' class='doneButt' value='Click' />
  </li>
</ul>

  1. Using .toggleClass()
Comments