Не работают несколько целей событий на одном родительском элементе
Я занимаюсь этой проблемой уже довольно долгое время. Это был отличный способ изучить 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}`);
}
});