Удаление родительского элемента в JS

Question

Есть такой список фильмов , у всех элементов li имеется div.delete - через CSS превратил их в кнопки с иконкой корзины, когда нажимаешь на них элемент li должен удалиться из списка и вот мой кусок кода HTML:

const deleteList = document.querySelectorAll('.delete');

deleteList.forEach((btn, i) => {
  btn.addEventListener('click', () => {
    btn.parentElement.remove();
    movieDB.movies.splice(i, 1);
  });
});

<div class="promo__interactive">
  <div>
    <div class="promo__interactive-title">ПРОСМОТРЕННЫЕ ФИЛЬМЫ</div>
    <ul class="promo__interactive-list">
      <li class="promo__interactive-item">ЛОГАН
        <div class="delete">X</div>
      </li>
      <li class="promo__interactive-item">ЛИГА СПРАВЕДЛИВОСТИ
        <div class="delete">X</div>
      </li>
      <li class="promo__interactive-item">ЛА-ЛА ЛЭНД
        <div class="delete">X</div>
      </li>
      <li class="promo__interactive-item">ОДЕРЖИМОСТЬ
        <div class="delete">X</div>
      </li>
      <li class="promo__interactive-item">СКОТТ ПИЛИГРИМ ПРОТИВ...
        <div class="delete">X</div>
      </li>
    </ul>
  </div>
</div>

Первым делом через JS передал в переменную deleteList все div.delete [5 штук]

Потом перебирая эти элементы в deleteList , создаю событие на все div.delete, где после клика удаляю родительский элемент li

Но почему-то ничего не удаляется, где я упустил?
Что не так?))

Answer 1

Код отрабатывает без ошибок

const movieDB={
 movies:[
   'ЛИГА СПРАВЕДЛИВОСТИ',
   'ЛА-ЛА ЛЭНД',
   'ОДЕРЖИМОСТЬ',
   'СКОТТ ПИЛИГРИМ ПРОТИВ...'
 ]
} 

const deleteList = document.querySelectorAll('.delete');
deleteList.forEach((btn, i) => {
    btn.addEventListener('click', () => {
    btn.parentElement.remove();
        movieDB.movies.splice(i, 1);
    });
});

.delete{
  display: inline;
}
.delete::after{
  content: "❌"
}

<div class="promo__interactive">
    <div>
        <div class="promo__interactive-title">ПРОСМОТРЕННЫЕ ФИЛЬМЫ</div>
        <ul class="promo__interactive-list">
            <li class="promo__interactive-item">ЛОГАН
                <div class="delete"></div>
            </li>
            <li class="promo__interactive-item">ЛИГА СПРАВЕДЛИВОСТИ
                <div class="delete"></div>
            </li>
            <li class="promo__interactive-item">ЛА-ЛА ЛЭНД
                <div class="delete"></div>
            </li>
            <li class="promo__interactive-item">ОДЕРЖИМОСТЬ
                <div class="delete"></div>
            </li>
            <li class="promo__interactive-item">СКОТТ ПИЛИГРИМ ПРОТИВ...
                <div class="delete"></div>
            </li>
        </ul>
    </div>
<div>

БЛОГ НА HUSL

Удаление родительского элемента в JS

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