@Just_Idiot
Совершаю очень много ошибок

Некорректно работает удаление записей. Как исправить?

Я написал функцию 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);
        }
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
@DimaIs
При вызове функции delete_note происходит удаление заметки по ссылке save_note, которая в свою очередь ссылается на последнюю созданную заметку (иначе говоря, на ее ноду):
save_note = document.createElement("div");
save_note.className = "note";

При первом удалении все проходит гладко, т.к. нода существует в элементе, но при повторном выполнении она уже отсутствует в дереве элементов (если, конечно, вы не создали еще одну заметку, тем самым не переопределив переменную save_note)
Выход отсюда такой - надо для каждой новой заметки замкнуть ссылку на ее ноду в функции удаления:
let save_note = document.createElement("div");
save_note.className = "note";
..................
function delete_note(note_node){
      section.removeChild(note_node);
}
delete_icon.addEventListener('click', () => { delete_note(save_note); });
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы