Почему в блоке, который был создан с помощью innerHTML и отрисован в html, не работает js код?

Question

[AndreyVolkov72]

Суть
По клику на копку, в html должен добавляться блок("header__basket-item"), в этом блоке по клику на кнопку("header__btn-delete"), должна происходить функция удаления этого блока с html. Но ничего не происходит.
Но когда вручную создаю эти блоки в html то всё работает, а когда добавляется блок через js, ничего не работает.
Единственной что "нарыл" в интернете, что innerHTML не всегда работает корректно и надо как-то по другому отрисовать блок

html

<div class="header-basket-content">
    <div class="header__basket-item">
        <img class="header__basket-img" src="img/mac/mc-little.png" alt="">
        <div class="header__basket-text">
            <p class="card__title text--margin">Ноутбук Apple MacBook Pro 16 TB i7 2.6/16/512 SSD SG MVVJ2RU/A</p>
            <p class="card__price">190 789 ₽</p>
        </div>
        <img class="header__btn-delete" src="img/backet/trash 3.svg" alt="">
    </div>
</div>

Функция создания блока в html по клику

const headerItemWrapper = document.querySelector('.header-basket-content');

btn.addEventListener('click', ()=> {

        headerItemWrapper.innerHTML += createItemBasket();

        function createItemBasket() {
            return `
            <div class="header__basket-item">
                <img class="header__basket-img" src="img/mac/mc-little.png" alt="">
                <div class="header__basket-text">
                    <p class="card__title text--margin">Ноутбук Apple MacBook Pro 16 TB i7 2.6/16/512 SSD SG MVVJ2RU/A</p>
                    <p class="card__price">190 789 ₽</p>
                </div>
                <img class="header__btn-delete" src="img/backet/trash 3.svg" alt="">
            </div>
            `
        }
    })

На всякий случай вот функция удаления блока

const basketItem = document.querySelectorAll('.header__basket-item');

basketItem.forEach(item=> {

    let basketBtnDelete = item.querySelector('.header__btn-delete');

    basketBtnDelete.addEventListener('click', ()=> {
        headerItemWrapper.removeChild(item);
    })
})

Comments

[Владимир Коротенко]

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

[Антон Литвиненко]

Владимир Коротенко, называется делегирование

Answer 1

[Николай]

Держите, вот тут описание, что вам надо использовать Делегирование

НУжно событие на родителя повесить и тогда он будет обрабатывать потомков
Ну, либо когда вставляете элемент, вызывайте новый слушатель для этого элемента