Я написал функцию delete_note, удаляющая заметку. Если у нас одна заметка, то все работает как надо.Если же у нас будет
2 или более этих заметок и уберем одну из них будет также действовать скрипт, но удаляя другую наша функция перестанет действовать и выдает следующую ошибку:
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
Я так понимаю данная ошибка означает то, что я собирался удалить то что и так удалено, но я же удалил только одну заметку, не все подряд.Также я заметил, что при удалении любой по счету заметки стирается почему-то последняя.
Я слабо разбираюсь в JS и DOM, это первый проект где я их использую.
HTML(я скину все)
<body>
<div class="header_of_page">
<div class="title_page">Заметки и Напоминания</div>
<div class="subtitle">Создавай новые идеи и ставь новые задачи</div>
</div>
<section class="create_note">
<div class="box">
<p class="input_intro">Ввод текста</p>
<textarea></textarea>
<p class="input_intro">Добавление даты</p>
<input type="date">
<div class="buttons">
<div class="add-btn" onclick="add_note();">Добавить Заметку</div>
</div>
</div>
</section>
<section class="notes_lists" id="all_notes">
</section>
</body>
Javascript
function add_note(){
section = document.getElementById("all_notes");
var textarea = document.querySelector('textarea');
var date = document.querySelector('input');
save_note = document.createElement("div");
save_note.className = "note";
section.appendChild(save_note);
var text_of_note = document.createElement("div");
text_of_note.className = "text_of_note";
var date_of_note = document.createElement("p");
date_of_note.className = "date_of_note";
var text_for_text_of_note = document.createTextNode(textarea.value);
text_of_note.appendChild(text_for_text_of_note);
var date_for_date_of_note = document.createTextNode(date.value);
date_of_note.appendChild(date_for_date_of_note);
function delete_note(){
section.removeChild(save_note);
}
var delete_icon = document.createElement("svg");
delete_icon.className = "delete_icon";
delete_icon.addEventListener('click', () => { delete_note(); });
save_note.appendChild(text_of_note);
save_note.appendChild(date_of_note);
text_of_note.appendChild(delete_icon);
}
