Recently, I've been experimenting with jQuery and I decided to create a simple to-do list application. However, I encountered an issue with my code. When I check an item that is not the first item on the list, the fadeOut() function does not work properly. Strangely enough, after checking the first item, it starts functioning correctly for all other items. It's worth mentioning that the first item was preloaded and not dynamically added like the rest of the items. Additionally, if I check off all items and then try to add a new one, the functionality stops working!
var main = function() {
var addComment = function() {
var $card;
var $cardBody;
var $formCheck;
var $formCheckLabel;
if($("#comment").val() !== "") {
$card = $("<div>").addClass("card bg-success text-white mt-3");
$cardBody = $("<div>").addClass("card-body");
$formCheck = $("<div>").addClass("form-check");
$formCheckLabel = $("<label>").addClass("form-check-label");
$($formCheckLabel).text($("#comment").val());
$($formCheckLabel).append('<input type = "checkbox" class="form-check-input shift">');
$($formCheck).append($formCheckLabel);
$($cardBody).append($formCheck);
$($card).append($cardBody);
$(".todos").append($card);
$("#comment").val("");
}
};
var remove = function() {
$(".card").on("click", function(event) {
$(this).fadeOut();
});
}
$("#btn").on("click", function(event) {
addComment();
});
$("#comment").on("keypress", function (event) {
if (event.keyCode === 13) {
addComment();
}
});
$(".card").on("click", function(event) {
remove();
});
};
$(document).ready(main);