html - 删除按钮以从数组中删除 html 列表项和项

Question

我制作了一种待办事项列表应用程序，但用于使用电影数据库 API 的电影。添加电影效果很好，但我正在尝试向每个元素添加一个删除按钮，该按钮将删除所述 html 元素并将其从本地存储中的数组中删除。我已经尝试了几种与我在这里找到的线程不同的方法，例如将按钮作为孩子附加到电影中，但这对我不起作用。提前感谢您提供的任何帮助。

    let addMovies = document.querySelector('.add-movies');
    let moviesList = document.querySelector('.films');
    let movies = JSON.parse(localStorage.getItem('movies')) || [];
    let removeFilm = document.querySelectorAll('.delete');


    function addMovie(e) {
    e.preventDefault();
    let text = (this.querySelector('[name=movie]')).value;
    let api = "https://www.omdbapi.com/?apikey=636d7ecb&t=" + text;
     $.getJSON(api, function (data) {
        var year = data.Year;
        var director = data.Director;
        var plot = data.Plot;
        var title = data.Title;
        var actors = data.Actors;
        var poster = data.Poster;
        var genre = data.Genre;
        var rating = data.imdbRating;
        var movie = {

              text
            , director
            ,  year
            , title
            , actors
            , plot
            , poster
            , genre
            , rating


        }

        movies.push(movie);
        populateList(movies, moviesList);
        localStorage.setItem('movies', JSON.stringify(movies));

      });

     };
      function populateList(films = [], filmsList) {
         filmsList.innerHTML = movies.map((film, i) => {

      return `

      <li>

        <img src="${film.poster}"/>

        <label for="movie${i}"><h1>${film.title}</h1><h2 id="genre"> 
   ${film.genre}</h2><p id="year"> (${film.year})</p></label>

         <label for="movie${i}"><p style="font-weight:bold;">Starring:</p> 
    <p> ${film.actors}</p></label>

        <label for="movie${i}">
        <img id="rt" src="https://www.digitaltrends.com/wp-content/uploads/2011/05/Rotten_Tomatoes_logo.png"/>
        <h2>${film.rating}</h2></label>

       <button id="remove" class="delete">Delete</button>

     </li>

      `;
} ).join('');
       }

      function deleteMovie(e){
        var el = e.target
         movies.splice(el.movie);
         localStorage.removeItem("movies", movie);
        }
     addMovies.addEventListener('submit', addMovie);
     removeFilm.addEventListener('click', deleteMovie);
     populateList(movies, moviesList);

标签： htmlarrayselement