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

         </li>
          `;
  }).join('');
}

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

}