Не работают несколько целей событий на одном родительском элементе

Я занимаюсь этой проблемой уже довольно долгое время. Это был отличный способ изучить Javascript, но я уже закончил и мне нужна помощь, пока я не оказался в тюрьме за что-нибудь. Мне нужно, чтобы флажок удаления встроенного набора форм проверялся перед удалением родительского элемента (формы). Я использую Django's inline formsets и в настоящее время отказываюсь использовать jquery для этого, потому что я хочу изучить старый добрый ванильный Javascript. Onclick будет делать одно или другое. Не может сделать и то, и другое в одно нажатие кнопки. Я перепробовал все способы обработки пузырения и захвата в меру своих возможностей. Ладно, теперь я буду молчать.

{% load crispy_forms_tags %}
{% load static %}
{% block content %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="{% static 'css/availability_update_new.css' %}">
</head>
<body>
<form id="all-add-form" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <legend class="bottom mb-4">Profiles Info</legend>
    {{ sun_bool.sunday|as_crispy_field }}
    {{ sunday_formset.management_form }}
    {% for sun_form in sunday_formset %}
        {% for hidden in sun_form.hidden_fields %}
            {{ hidden }}
        {% endfor %}
        <div class="sun_time_slot_form">
            {{ sun_form }}
            <button class="delete-sun-form" type="button" id="delete-sun-btn" onclick="one();"> Delete This Sunday
                Timeslot
            </button>
        </div>
    {% endfor %}

    <button id="add-sun-form" type="button" class="button">Add Other Sunday Times</button>

    <input type="submit" name="submit" value="Submit" class="btn btn-primary"/>
</form>

<script type="text/javascript" src="{% static 'js/add_timeslot.js' %}"></script>

</body>
</html>
{% endblock content %}



const sunForm = document.getElementsByClassName('sun_time_slot_form');
const mainForm = document.querySelector('#all-add-form');
const addSunBtn = document.querySelector("#add-sun-form");
const submitFormBtn = document.querySelector('[type="submit"]');
const totalForms = document.querySelector("#id_id_sunday_formset-TOTAL_FORMS");

let formCount = sunForm.length - 1;

addSunBtn.addEventListener('click', function (e) {
    e.preventDefault();

    const newSunForm = sunForm[0].cloneNode(true);
    const formRegex = RegExp(`id_sunday_formset-(\\d){1}-`, 'g');

    formCount++;

    newSunForm.innerHTML = newSunForm.innerHTML.replace(formRegex, 
    `id_sunday_formset-${formCount}-`);
    mainForm.insertBefore(newSunForm, submitFormBtn);
    totalForms.setAttribute('value', `${formCount + 1}`);
});

function updateSunForm() {
    let count = 0;
    for (let sun_form of sunForm) {
        const sunFormRegex = RegExp(`id_sunday_formset-(\\d){1}-`, 'g');
        sun_form.innerHTML = sun_form.innerHTML.replace(sunFormRegex, 
            `id_sunday_formset-${count++}-`)
    }
}

mainForm.addEventListener('click', (ee) => {
    if (ee.target.classList.contains('delete-sun-form')) {
        ee.preventDefault();
        ee.target.value;
        ee.target.parentElement.querySelector('input[id$="-DELETE"]' +
            '[type="checkbox"]').checked = true;
        ee.target.value;
        ee.target.parentElement.remove();
        formCount--;
        updateSunForm();
        totalForms.setAttribute('value', `${formCount + 1}`);
    }
});
Вернуться на верх