I'm struggling to add and remove CSS classes on my label/checkbox tick, as well as removing the item once it's been checked. I can only manage to do one of these tasks at a time.
$(function () {
$("label[for='<%= @todo.id %>']").click(function () {
el = $("#todo-container-<%= @todo.id %>");
el.addClass('animated fadeOut');
el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function (e) {
el.removeClass('animated fadeOut');
el.remove();
});
});
});
In my complete.js.erb file, I am trying to add the animated and fadeOut classes to the container when the label is clicked (thus checking the checkbox), then remove both the class and the container element after it has faded out.
I could use some assistance here. My code is not meeting both of my requirements simultaneously.