Problem in not displaying items on DOM after removing an array from localStorage-CodePudding

I've been making a movie watchlist as part of a solo project activity using HTML, CSS and Vanilla JS and I have been struggling in trying to have the watchlisted movies populate properly after clicking the remove button on a movie title.

Here is the code that I have to populate the watchlisted movies stored on localStorage on the page.

let moviesFromLocalStorage =
  JSON.parse(localStorage.getItem("addedMovies")) || [];
console.log(moviesFromLocalStorage)
// localStorage.clear();

if (moviesFromLocalStorage.length === 0) {
  document.querySelector(".empty-watchlist").style.display = "block";
} else {
  renderWatchlist(moviesFromLocalStorage);
}

function renderWatchlist() {
  const watchlistHtml = moviesFromLocalStorage.map((watchlist, index) => {
    return `
          <div >
          <img src="${watchlist.Poster}" alt="Image of movie">
          <div >
          <div >
              <h3 >${watchlist.Title}</h3>
              <i >⭐</i> <span >${watchlist.imdbRating}</span>
          </div>
          <div >
              <p >${watchlist.Runtime}</p>
              <p >${watchlist.Genre}</p>
              <button id="remove-from-watchlist-btn" data-index-number="${index}"></button><p >Remove</p>
          </div>
          <p >${watchlist.Plot}</p>
          </div>
      </div>
      `;
  });

  if (document.getElementById("populated-movies-watchlist") != null) {
    document.getElementById("populated-movies-watchlist").innerHTML  =
      watchlistHtml.join("");
  }
}

document.addEventListener("click", (e) => {
  if (e.target.dataset.indexNumber) {
    console.log(e.target.dataset.indexNumber);
    removeMovie(e.target.dataset.indexNumber);
  }
});

function removeMovie(index) {
  moviesFromLocalStorage.splice(index, 1);
  localStorage.setItem(
    "moviesFromLocalStorage",
    JSON.stringify(moviesFromLocalStorage)
  );
  console.log(moviesFromLocalStorage);
  renderWatchlist();
}

I have searched on SO on how to remove an array from localStorage and I adapted it into my code (as you can see from removeMovie function) and the array that is being selected is being removed (after checking the console). However on the page itself, the previously watchlisted movies still remain, while a new set of watchlisted movies appears minus the previously selected movie. See screenshot:

Before clicking the remove button

After clicking the remove button

In function removeMovie, I've tried taking out the localStorage.setItem out and the same problem still occured. I console.logged each step in each function to see that the array containing the data of the movie is properly selected and checked that the moviesFromLocalStorage.splice(index,1) was removing the selected array from localStorage which it did. However, as per screenshot, a new set of movies minus the screenshot is being populated on top of the original set.

This is my first time here asking a question, so I'm not sure if I'm detailed enough in my question, but please let me know and I can try and clarify as best as I can.

Any help would be much appreciated.

CodePudding user response：

Change innerHTML part like so

document.getElementById("populated-movies-watchlist").innerHTML = watchlistHtml.join("");

= replaced with =