Как я могу создать функцию, которая может удалять флажки из классов после их проверки?

Question

Я пытаюсь создать диспетчер задач, у меня добавление задачи работает, но я борюсь с обратным. Я хочу, чтобы, когда я нажимаю на флажок, он снимал этот флажок и его описание. Есть кое-что, что я делаю неправильно, и я не уверен, что это. Я думаю, что мне нужен обработчик событий или что-то, или, возможно, я не использую remove () правильно, и я не совсем уверен, как go об этом. Так что все свыше function deleteTask() { работает.

HTML:

        <div id="sidebar">
            <h2>Overall Status</h2>

                <div class="sb">
                    <h3>School -</h3>
                        <input type="submit" id="schl.bttn" value="0">
                </div>

                <div class="sb">
                    <h3>Work -</h3>
                        <input type="submit" id="wrk.bttn" value="0">
                </div>

                <div class="sb">
                    <h3>Weekend -</h3>
                        <input type="submit" id="wknd.bttn" value="0">
                </div>

                <div class="sb">
                    <h3>Other -</h3>
                        <input type="submit" id="othr.bttn" value="0">
                </div>

         </div>

         <div id="tasks">
             <div id="newtask">
                 <h2>Add New Task</h2>


                 <div id="IDK">
                     <div id="idk">
                        <label for="options">Options*</label>
                            <select id="options">
                                <option hidden disabled selected value>------------------------------------------</option>
                                <option value="School">School</option>
                                <option value="Work">Work</option>
                                <option value="Weekend">Weekend</option>
                                <option value="Other">Other</option>
                            </select>
                     </div>

                        <div id="idk2">
                            <label for="date">Completion Date</label>
                                <input type="date" id="date">
                        </div>
                 </div>

                    <label for="desc">Description*</label>
                        <input type="text" id="desc" size="75">

                    <input type="submit" id="add" value="Add">
                        <div id="req"><strong>* Required fields</strong></div> 
            </div>




              <div id="current">

                    <h2>Current Tasks</h2>

                          <div id="schlwrkwkndothr">

                              <div id="schl">
                                  <h3>School</h3>
                                  <br>
                              </div>

                              <div id="wrk">
                                  <h3>Work</h3>
                                  <br>
                              </div>

                                <div id="wknd">
                                  <h3>Weekend</h3>
                                  <br>
                                </div>

                                <div id="othr">
                                  <h3>Other</h3>
                                  <br>
                                </div>
                          </div>
              </div>



        </div>
</div>

jQuery:

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;
  }
}

Answer 1

Вам не нужна функция deleteTask(). Когда вы добавляете теги <checkbox> и <label>, привяжите их к прослушивателю событий, который удаляет их при установке флажка:

$('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox1' }).appendTo($('#schl')).click(handle_removal);

И функции, которая обрабатывает удаление независимо от того, какой флажок он связан с:

function handle_removal(e){
    if( $(e.target).is(":checked") ) {
        var selector = 'input#' + $(e.target).parent().attr('id') + '-btn'; // Determine the ID of the input field
        var input = $( selector ); // Get the input field
        input.val( parseInt( input.val() ) - 1 ); // Subtract 1

        $(e.target).next().remove(); // Remove label
        $(e.target).remove(); // Remove checkbox
    }
}

Это также требует, чтобы вы изменили имена полей <input> (в которых отображаются значения для каждой категории:

<input type="submit" id="schl-btn" value="0">
<input type="submit" id="wrk-btn" value="0">
<input type="submit" id="wknd-btn" value="0">
<input type="submit" id="othr-btn" value="0">

handle_removal() функция берет идентификатор родительского div (например, schl) и добавляет -btn, чтобы вывести селектор для поля ввода, чтобы уменьшить, например, input#schl-btn.