Can I displaying the same array after adding and removing items using vanilla JS and HTML without using a separate page or refreshing it?

Question

I have this mini CRUD in vanilla JS and HTML. I need to be able to add or remove items and then list the array movies accordingly. I also need to do that without refreshing the page because of my hardcoded array.

I can't really call listMovies() every time a title is added or removed , otherwise I'd have multiple repetitions of the array displayed in the page.

Can anyone help me with a a solution for that?

This is my code:

window.onload = function () {

  //Hard-coded  array of movies - data.
  // App is not connected to a database so everytime page is refreshed the array goes back to its original content. 
  var movies = [
    'The Shawshank Redemption', 'The Godfather', 'Star Wars: Episode V - The Empire Strikes Back',
    'Forrest Gump', 'The Perks of Being a Wallflower', 'The Dark Knight', 'Changeling', 'It\'s a Wonderful Life',
    'The Silence of the Lambs', '8 Mile', 'The Breakfast Club', 'Django Unchained', 'Silver Linings Playbook',
    'The Shining', 'Seven', 'American Beauty', 'Pulp Fiction', 'Zero Dark Thirty', 'Argo', 'The Hurt Locker'
  ];

  // Variables for DOM manipulation
  // var movieList = document.getElementById("movie-list__container");
  var videoInput = document.getElementById("videoInput");
  var addVideo = document.getElementById("addVideo");
  var removeVideo = document.getElementById("removeVideo");
  var alertMsg = document.getElementById("alertMsg");
  var autocomplete = document.getElementById("autocomplete");
  var searchResults = document.getElementById("search-results");
  var movieListResults = document.getElementById("movie-list-results");



  listMovies();

  function listMovies() {
    movies.sort();
    for (i = 0; i < movies.length; i++) {
      movieListResults.innerHTML += "<li>" + movies[i] + "</li>"
    };

  }



  addVideo.onclick = addMovies;


  function addMovies() {
    var title = videoInput.value;
    if (add(movies, title)) {
      videoInput.value = "";
      searchResults.innerHTML = '';
      movieListResults.innerHTML += "<li>" + title + "</li>";
      alertMsg.classList.remove("fail");
      alertMsg.classList.add("success");
      alertMsg.innerHTML = "Title was inserted successfully";
    } else {
      alertMsg.innerText = 'Please add a video title';
      alertMsg.classList.remove("success");
      alertMsg.classList.add("fail");
    }
  }

  function add(data, title) {
    if (title == "") {
      return false;
    } else {
      data.push(title);
      return true;
    }
  }

  autocomplete.onkeyup = function () {
    var results = [];
    var userInput = this.value;
    searchResults.innerHTML = "";

    if (userInput != "") {
      results = search(movies, userInput);
      searchResults.style.display = "block";

      if (results.length == 0) {
        searchResults.innerHTML += "<li>Not found</li>";
        searchResults.style.color = "grey";
      } else {
        searchResults.style.color = "black";
        for (i = 0; i < results.length; i++) {
          searchResults.innerHTML += "<li>" + results[i] + "</li>";
        }
      }
    }
  };

  function search(data, input) {
    var results = [];
    for (i = 0; i < data.length; i++) {
      if (input.toLowerCase() === data[i].slice(0, input.length).toLowerCase()) {
        results.push(data[i]);
      }
    }
    return results;
  }

  removeVideo.onclick = deleteMovie;

  function deleteMovie() {
    var title = videoInput.value;
    if (title === "") {
      alertMsg.innerHTML = 'Please enter the title you want to remove';
      alertMsg.classList.add("fail");
    } else {
      if (remove(movies, title)) {
        alertMsg.innerHTML = "Title has been successfully removed";
        alertMsg.classList.add("success");
      } else {
        alertMsg.innerHTML = "Title not found";
        alertMsg.classList.add("fail");
      }
    }
  }

  function remove(data, title) {
    for (var i = 0; i < data.length; i++) {
      if (title.toLowerCase() === data[i].toLowerCase()) {
        data.splice(i, 1);
        return true;
      }
    }
    return false;
  }

}; //End of window.onload

Answer 1

Nvm! I figured it out by getting rid of the listMovies() and having the array printed once.

After that, I used a for loop for addMovie() and deleteMovie() to loop through the array and print it after the updates.

I realized that all I needed was to loop through the movies array and display the array again for both addMovie() and deleteMovie().

  for (i = 0; i < movies.length; i++) {
    movieListResults.innerHTML += "<li>" + movies[i] + "</li>"
  };

My logic to add and remove titles in JS was correct but the logic to display the titles in HTML wasn't.

PS: FYI I'm a beginner!

Cheers