DOM-манипуляция - отображение различных элементов при нажатии на текст ⇐ CSS

[Anonymous]

Как видно из названия, я работаю над небольшим проектом, просто чтобы протестировать некоторые манипуляции с DOM. Я работаю над Todo-List, где пользователь может создавать списки с именами (например, работа, тренажерный зал, финансы и т. д.), а затем добавлять несколько подзадач для каждой категории (нажмите кнопку "Работа" — показывает подзадачу1, подзадачу2 и т. д.). - при нажатии на тренажерный зал должны отображаться подзадачи тренажерного зала и т. д.).

Теперь я застрял в том, что пользователь может щелкнуть основные задачи и показывать подзадачи отдельно каждый раз, когда щелкает основную.

Почти все делается с помощью Javascript.

let index = 1; функция displayTasks() { const addButton = document.getElementById("addbutton"); addButton.addEventListener("click", function () { createDialogTasks(); }); } функция createDialogTasks() { const content = document.getElementById("content"); const Dialog_tasks = document.createElement("диалог"); const input_dialog_task = document.createElement("input"); input_dialog_task.setAttribute("id", "input_create_task_name"); input_dialog_task.setAttribute("тип", "текст"); const create_task_name = document.createElement("кнопка"); create_task_name.setAttribute("id", "создать-кнопку"); create_task_name.textContent = "Создать"; create_task_name.addEventListener("click", function () { createDialogButton (input_dialog_task, Dialog_tasks); }); const close_dialog_button = document.createElement("кнопка"); close_dialog_button.textContent = "Закрыть"; close_dialog_button.addEventListener("щелчок", функция () { диалог_задачи.закрыть(); }); content.appendChild(dialog_tasks); диалог_задачи.appendChild(input_dialog_task); диалог_задачи.appendChild(create_task_name); диалог_задачи.appendChild(закрыть_диалог_кнопка); диалог_задачи.showModal(); } функция displayTask(getTaskText) { const div_new_task = document.getElementById("добавленные-задачи"); const display_task_name = document.createElement("h1"); display_task_name.setAttribute("данные", индекс); display_task_name.textContent = getTaskText; display_task_name.addEventListener("click", function () { displayTaskName (getTaskText); }); const delete_task_button = document.createElement("кнопка"); delete_task_button.setAttribute("данные", индекс); delete_task_button.textContent = "удалить"; delete_task_button.addEventListener("click", function () { deleteTaskButton (display_task_name); }); div_new_task.appendChild(display_task_name); div_new_task.appendChild(delete_task_button); } функция createDialogButton (input_dialog_task, Dialog_tasks) { if (input_dialog_task.value != "") { displayTask(input_dialog_task.value); диалог_задачи.закрыть(); console.log(input_dialog_task.value); } еще { alert("Вставьте хотя бы один символ"); } индекс++; } функция displayTaskName(getTaskText) { const main_div = document.getElementById("main"); const test = document.createElement("кнопка"); test.addEventListener("click", function () { const mainText = document.createElement("p"); mainText.textContent = "тест"; main_div.appendChild(mainText); }); test.textContent = "Новая задача"; main_div.appendChild (тест); } функция deleteTaskButton(display_task_name) { const id_element_to_delete = display_task_name.getAttribute("данные"); const test = document.querySelectorAll( "[data='" + id_element_to_delete + "']" ); test.forEach((item) => { item.outerHTML = ""; }); } экспортировать displayTasks по умолчанию; Вот полный код JavaScript. Я знаю, что это не самое лучшее и, вероятно, трудно читать. Я постараюсь объяснить лучше, если это необходимо. Предложения по улучшению форматирования и кодирования приветствуются, но не стесняйтесь, без резкости.

Вот скелет HTML

Документ Мой список дел Мои задачи
+ Удалить Разработано Велья Марко ⓒ
В настоящий момент, когда я нажимаю на основную задачу после ее создания, появляется кнопка для создания подзадач. Но они показаны все вместе. Я не могу придумать, как закодировать так, как он должен работать. поэтому я прошу несколько советов и идей для начала. Никогда не делал ничего подобного, так что это становится немного сложнее.

P.S: я использую NPM.

Заранее спасибо.

Честно говоря, я не знаю, с чего начать, я думал о создании отдельных массивов для каждого элемента, а затем отображал их после щелчка, но я не думаю, что это правильный подход к DOM.

Я ожидаю, что основной контент будет правильно обновляться с подзадачами для каждой выбранной основной задачи.