21
Июл
2021

Не работает удаление элементов, что написано не так, подскажите пожалуйста?

в js файле на 74 строке блок с неработающим кодом. Ожидается что при клике на корзинку, название фильма удаляется.

"use strict";
document.addEventListener("DOMContentLoaded", () => {
  const movieDB = {
    movies: [
      "Логан",
      "Лига справедливости",
      "Ла-ла лэнд",
      "Одержимость",
      "Скотт Пилигрим против...",
    ],
  };

  const adv = document.querySelectorAll(".promo__adv img"),
    poster = document.querySelector(".promo__bg"),
    genre = poster.querySelector(".promo__genre"),
    movieList = document.querySelector(".promo__interactive-list"),
    // btnDel = document.querySelector(".delete"),
    addForm = document.querySelector("form.add"),
    addInput = addForm.querySelector(".adding__input"),
    checkbox = addForm.querySelector('[type="checkbox"]');

  addForm.addEventListener("submit", (e) => {
    e.preventDefault();

    let newFilm = addInput.value;
    const favorite = checkbox.checked;

    if (newFilm) {
      if (newFilm.length > 21) {
        newFilm = `${newFilm.substring(0, 22)}...`;
      }

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

      movieDB.movies.push(newFilm);
      sortArr(movieDB.movies);

      createMovieList(movieDB.movies, movieList);
    }

    e.target.reset();
  });

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

  const makeChanges = () => {
    genre.textContent = "драма";
    poster.style.backgroundImage = 'url("img/bg.jpg")';
  };

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

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

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

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

      createMovieList(movieDB.movies, parent);
    });
  });

  // btnDel.addEventListener("click", () => {
  //   let newMovieDB = movieDB.movies.filter((film) => !film);
  //   createMovieList(newMovieDB, movieList);
  //   console.log(newMovieDB);
  // });

  deleteAdv(adv);
  makeChanges();
  createMovieList(movieDB.movies, movieList);
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Movie DB</title>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=cyrillic-ext"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/style.min.css" />
  </head>
  <body>
    <header class="header">
      <div class="header__search">
        <form action="#">
          <input type="text" placeholder="Поиск" />
        </form>
      </div>
      <div class="header__logo">
        <img src="icons/Logotype.svg" alt="logo" />
      </div>
    </header>
    <main class="promo">
      <div class="promo__menu">
        <nav class="promo__menu-list">
          <ul>
            <li>
              <a class="promo__menu-item promo__menu-item_active" href="#"
                >Фильмы</a
              >
            </li>
            <li><a class="promo__menu-item" href="#">Сериалы</a></li>
            <li><a class="promo__menu-item" href="#">Мультфильмы</a></li>
            <li><a class="promo__menu-item" href="#">Клипы</a></li>
            <li><a class="promo__menu-item" href="#">Трейлеры</a></li>
          </ul>
        </nav>
      </div>
      <div class="promo__content">
        <div class="promo__bg">
          <div class="promo__genre">КОМЕДИЯ</div>
          <div class="promo__title">МАРСИАНИН</div>
          <div class="promo__descr">
            ИСТОРИЯ ЧЕЛОВЕКА, ВЫЖИВШЕГО НА ЧУЖОЙ ПЛАНЕТЕ В ОДИНОЧКУ
          </div>
          <div class="promo__ratings">
            <span>IMDb: 8.0</span>
            <span>Кинопоиск: 7.7</span>
          </div>
        </div>
        <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>
            <form class="add">
              <div class="promo__interactive-title">ДОБАВИТЬ НОВЫЙ ФИЛЬМ</div>
              <span>Введите название фильма</span>
              <input
                class="adding__input"
                type="text"
                placeholder="Что уже посмотрено...?"
              />
              <span>Сделать его любимым?</span>
              <input type="checkbox" />
              <span class="yes">Да!</span>
              <button>Подтвердить</button>
            </form>
          </div>
        </div>
      </div>
      <div class="promo__adv">
        <div class="promo__adv-title">Реклама от спонсоров</div>
        <img src="img/content_1.jpg" alt="some picture" />
        <img src="img/content_2.jpg" alt="some picture" />
        <img src="img/content_3.png" alt="some picture" />
      </div>
    </main>

    <script src="js/script.js"></script>
  </body>
</html>

Источник: https://ru.stackoverflow.com/questions/1307545/%D0%9D%D0%B5-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82-%D1%83%D0%B4%D0%B0%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2-%D1%87%D1%82%D0%BE-%D0%BD%D0%B0%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%BE-%D0%BD%D0%B5-%D1%82%D0%B0%D0%BA-%D0%BF%D0%BE%D0%B4%D1%81%D0%BA%D0%B0%D0%B6%D0%B8%D1%82%D0%B5-%D0%BF%D0%BE%D0%B6%D0%B0%D0%BB%D1%83%D0%B9%D1%81%D1%82%D0%B0

Тебе может это понравится...

Добавить комментарий