I have 4 carousels that each display text info from an API when the user inputs content into a search bar and clicks search button. When the user repeats the process, is there a way I can remove existing text info and replace it with the new info the API fetches?
var getMovie = function (event) {
// gets button element
var inputEl = document.querySelector(".validate");
// retrieves button element text data
var movie = inputEl.value.trim();
movie = movie.toUpperCase();
// calls retrieveData function
retrieveData(movie);
// clear input field
inputEl.value = "";
};
var displayMovie = function (data2, movie, data) {
saveMovie(movie);
mainContentEl.style.display = "block";
var reviewData = data;
// get movie data
var movieData = data2;
// calls carousel builder functions
// scale the headers of the cards down
// enlarge the content font slightly to fill the card
carouselItemOne(movieData, movie);
carouselItemTwo(movieData, movie);
carouselItemThree(reviewData, movie);
carouselItemFour(movieData, movie);
};