Как отрабатывает логика скрипта js?

Question

[yura_born]

Обучаюсь JS и у меня возник такой вопрос по поводу навешивания событий:
в функции showListFilm() я создаю на странице , после чего вешаю на div.delete событие по удалению все работает как надо (сейчас код с событиями закомментировал в функции), но вопрос в следующем, когда я выношу этот код из функции, удаление срабатывает только 1 раз на том элементе на который я кликаю, почему так происходит? Может кто нить объяснить?

let btnDel = document.querySelectorAll('.delete');
    btnDel.forEach((btn, i) => {
        btn.addEventListener('click', (e) => {
            e.target.parentElement.remove();
            movieDB.movies.splice(i,1);
            showListFilm(movieDB.movies, promoItemsWrp);
        });
    });

в переменную btnDel попадает NodeList из 6 элементов, а дальше затуп.

'use strict';

document.addEventListener('DOMContentLoaded', () => {

    const movieDB = {
        movies: [
            "Логан",
            "Лига справедливости",
            "Ла-ла лэнд",
            "Одержимость",
            "Скотт Пилигрим против...",
            "Бла-бла"
        ]
    };

    const deleteAdv = (arr) => {
        arr.forEach(item => {
            item.remove();
        });
    };


    const sortArr = (arr) => {
        arr.sort();
    };

    const adv = document.querySelectorAll('.promo__adv img');

    deleteAdv(adv);



    document.querySelector('.promo__genre').textContent = 'драма';

    document.querySelector('.promo__bg').style.background = 'url(img/bg.jpg) center center/cover no-repeat';

    const promoItemsWrp = document.querySelector('.promo__interactive-list'),
        formAddWrp = document.querySelector('form.add'),
        inputAddFilm = formAddWrp.querySelector('.adding__input'),
        inputFavFilm = formAddWrp.querySelector('input[type=checkbox]');


    showListFilm(movieDB.movies, promoItemsWrp);



    formAddWrp.addEventListener('submit', (e) => {
        e.preventDefault();

        if (inputAddFilm.value) {
            let inputValueText = inputAddFilm.value.toUpperCase();
            let favFilmChecked = inputFavFilm.checked;

            if (inputValueText.length > 21) {
                inputValueText = `${inputValueText.slice(0,21)}...`;
            }

            movieDB.movies.push(inputValueText);

            if (favFilmChecked) {
                console.log('Добавляем любимый фильм');
            }

            showListFilm(movieDB.movies, promoItemsWrp);
            e.target.reset();
        }
    });


    let btnDel = document.querySelectorAll('.delete');
    btnDel.forEach((btn, i) => {
        btn.addEventListener('click', (e) => {
            e.target.parentElement.remove();
            movieDB.movies.splice(i,1);
            showListFilm(movieDB.movies, promoItemsWrp);
        });
    });


    function showListFilm(films, parent) {
        sortArr(films);
        parent.innerHTML = "";

        films.forEach((item, i) => {
            parent.innerHTML += `
            <li class="promo__interactive-item">
            ${i+1}. ${item}
            <div class="delete"></div>
            </li>
            `;

        // document.querySelectorAll('.delete').forEach((btn, i) => {
        //     btn.addEventListener('click', (e) => {
        //         e.target.parentElement.remove();
        //          movieDB.movies.splice(i,1);
        //         showListFilm(films, parent);
        //     });
        // });

    });
    }
});

Comments

[WbICHA]

А зачем ты удаляешь див так:
e.target.parentElement.remove();
если потом ты всё равно делаешь перерисовку без него?
showListFilm(movieDB.movies, promoItemsWrp);

Answer 1

[WbICHA]

когда я выношу этот код из функции, удаление срабатывает только 1 раз на том элементе на который я кликаю, почему так происходит?

Потому что ты вешаешь события только 1 раз при первичном вызове скрипта, а далее ты вызываешь showListFilm, ПОЛНОСТЬЮ перерисовываешь все промо айтемы (включая дивы в них) и всё. Откуда в новых дивах появятся эвенты, если, ты их не создаёшь после перерисовки?

Comments

[yura_born]

блин, точно