TypeError: Cannot read properties of undefined (reading 'remove') ошибка при удалении дочернего элемента

Question

решил попробовать написать pet проект, темой стал ToDoList (его вроде все делают как 1ый). Изначально есть 2 кнопки, первая добавляет input, вторая создаёт строку с текстом того что введено в input, так же вместе со строкой создаётся кнопка по нажатию на которую стирается input, строка и сама эта кнопка, проблема в том что когда я создаю двое и больше input(ов), и потом пытаюсь удалить какую либо строку то выдаёт эту ошибку. Полная запись ошибки:

(Uncaught TypeError: Cannot read properties of undefined (reading 'remove') at HTMLButtonElement. (List.js:44:26)".

Прошу лишний раз незасирать за говнокод, сам знаю что код хуже некуда (js изучаю месяц) Js код:

const btn = document.querySelector('.buton');
const btn2 = document.querySelector('.buton2');

const container = document.querySelector('.container');

btn.addEventListener('click', Add);
btn2.addEventListener('click', Write);


let inp;
function Add()
{
        inp = document.createElement('input');
        container.appendChild(inp);
}

let zapiska;
let delBtn;

function Write()
{
    zapiska = document.createElement('span');
    delBtn = document.createElement('button');
    document.body.append(zapiska);
    document.body.append(delBtn);
    
    
    for(let i = 0; i < container.children.length; i++)
    {
        zapiska.innerText = " " + container.children[i].value + " ";
        delBtn.innerText = 'Удалить';
        
        delBtn.addEventListener('click', function() 
        { 
            container.children[i].remove();
        })
    }
    
    let zapiskaClass = zapiska.classList.add('zapiska1');
    let delBtnClass = delBtn.classList.add('delBtn1');
    
    
    let zapiska2 = document.querySelector('.zapiska1');
    
    for (let zapiska1 of zapiska2.classList) 
    {
        console.log(zapiska2.classList);
        delBtn.addEventListener('click', function() 
        { 
            zapiska2.remove();
        })
    }
    
    
    let delBtn2 = document.querySelector('.delBtn1');
    
    for (let delBtn1 of zapiska2.classList) 
    {
        console.log(delBtn2.classList);
        delBtn.addEventListener('click', function() 
        { 
            delBtn2.remove();
        })
    }
}

HTML:

<html>
    <head>
        <link rel="stylesheet" href="List.css">
    </head>

    <body>
        <div class="container">Контейнер</div>
        <button class="buton">Добавить</button>
        <button class="buton2">Записать</button>
        
        <script src="List.js"></script>
    
    </body>
</html>

БЛОГ НА HUSL

TypeError: Cannot read properties of undefined (reading 'remove') ошибка при удалении дочернего элемента

Ответы (0 шт):