Deleting item from local storage array using button

I've created a to-do list app that takes movie info from an API and creates a list item. I want to add a delete button to each item that will splice the item from the local storage array that they are added to but this doesn't seem to work.

function populateList(films = [], filmsList) {

  filmsList.innerHTML =, i) => {
    return `


            <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}">
               <h3>Rotten Tomatoes</h3>
        <button onclick="deleteMovie()" id="movie${i}" class="delete">Delete</button> 


function deleteMovie(e) {
  var id =;
  movies.splice(id, 1);