Reputation: 65
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");
});
Upvotes: 0
Views: 1371
Reputation: 15565
$(".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>
.toggleClass()
Upvotes: 5
Reputation: 411
$( ".doneButt" ).on("click",function() {
var style = $(this).attr("style")+"";
if(style=="undefined")
$(this).parents("li").css("text-decoration", "line-through");
else
$(this).parents("li").removeAttr("style");
});
Upvotes: 0