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

我制作了一个类似于待办事项列表的应用程序，但用于使用电影数据库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);

let addMovies=document.querySelector（'.addMovies'）；
让moviesList=document.querySelector（'.films'）；
让movies=JSON.parse（localStorage.getItem（'movies'））| |[]；
让removeFilm=document.querySelectorAll（'.delete'）；
功能添加电影（e）{
e、 预防默认值（）；
让text=（this.querySelector（'[name=movie]'）.value；
让api=”https://www.omdbapi.com/?apikey=636d7ecb&t=“+案文；
$.getJSON（api，函数（数据）{
var年=数据年；
var director=data.director；
变量图=数据图；
var title=data.title；
var actors=data.actors；
var poster=data.poster；
var-genre=data.genre；
var评级=data.imdbRating；
var电影={
文本
经理
，年
标题
，演员
情节
，海报
体裁
评级
}
电影。推送（电影）；
大众列表（电影、电影列表）；
setItem（'movies'，JSON.stringify（movies））；
});
};
函数populateList（films=[]，filmsList）{
filmsList.innerHTML=movies.map（（film，i）=>{
返回`

${film.title}
${film.genre}
（${film.year}）
星号：

${film.actors}

${film.rating}
删除

`;
}）。加入（“”）；
}
功能删除电影（e）{
var el=e.target
电影拼接（el.movie）；
localStorage.removietem（“电影”，电影）；
}
addMovies.addEventListener（'submit'，addMovie'）；
removeFilm.addEventListener（'click'，deleteMovie'）；
大众列表（电影、电影列表）；

任何html元素的id都必须是唯一的。无论何时插入，都会重复“删除”和“流派”。尝试将一些唯一标识符附加到各种id属性中。您可以将名称

remove

和

genre

设置为类名，使用数组的索引作为id，此id将是用于对需要删除的行进行数组拼接的索引。