dimanche 19 avril 2020

How can I create a function that can remove checkboxes from the classes upon checking them?

I'm trying to create a task manager, I've got the adding of the task working, but struggling with the reverse. I want it, so that when I click on a checkbox, it will remove that checkbox and the description of it. There is something I'm doing wrong and I'm not sure what it is. I think I need an event handler or something, or maybe I'm not using remove() right, and I'm not entirely sure how to go about it. So everything from above function deleteTask() { is working.

var a = 0;
var b = 0;
var c = 0;
var d = 0;



function addTask() {

  var newTask = $("#desc").val();
  var newTask2 = $("#date").val();

  if ($("#options").val() == "" || $("#desc").val() == "") {
    alert("You have not completed all required fields.");

  } else if ($("#options").val() == "School") {
    $('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox1' }).appendTo($('#schl'));
    $('<label />', {  text: newTask+newTask2 }).appendTo($('#schl'));

  document.getElementById("schl.bttn").value = ++a;


  } else if ($("#options").val() == "Work") {
    $('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox2' }).appendTo($('#wrk'));
    $('<label />', {  text: newTask+newTask2 }).appendTo($('#wrk'));

    document.getElementById("wrk.bttn").value = ++b;


  } else if ($("#options").val() == "Weekend") {
    $('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox3' }).appendTo($('#wknd'));
    $('<label />', {  text: newTask+newTask2 }).appendTo($('#wknd'));

    document.getElementById("wknd.bttn").value = ++c;


  } else if ($("#options").val() == "Other") {
    $('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox4' }).appendTo($('#othr'));
    $('<label />', {  text: newTask+newTask2 }).appendTo($('#othr'));

    document.getElementById("othr.bttn").value = ++d;

  }

  $("#desc").val("");
  $("#date").val("");

}

$(document).ready(function() {
     $("#add").on("click", function() {
         addTask();
});
});








function deleteTask() {

if ($('.checkbox1').is(':checked')) {
    $('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox1' }).empty($('#schl'));
    $('<label />', { text: newTask+newTask2 }).empty($('#schl'));

document.getElementById("schl.bttn").value = --a;


} else if ($('.checkbox2').is(":checked")) {
    $('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox2' }).remove($('#wrk'));
    $('<label />', { text: newTask+newTask2 }).remove($('#wrk'));

document.getElementById("wrk.bttn").value = --b;


} else if ($('.checkbox3').is(":checked")) {
    $('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox3' }).remove($('#wknd'));
    $('<label />', { text: newTask+newTask2 }).remove($('#wknd'));

document.getElementById("wknd.bttn").value = --c;


} else if ($('.checkbox4').is(":checked")) {
    $('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox4' }).remove($('#othr'));
    $('<label />', { text: newTask+newTask2 }).remove($('#othr'));

document.getElementById("othr.bttn").value = --d;
  }
}



Aucun commentaire:

Enregistrer un commentaire