清除历史按钮只会清除最后的 API 结果

Question

我创建了一个 fetch 调用以在我的网页上显示来自 API 的结果。 当我尝试创建一个 eventListener 来清除用户的搜索历史时，只会清除最后一个结果（而不是所有结果）。

我尝试为显示的每个搜索结果创建一个 for 循环，并将清除历史事件监听器移到 function 之外。 我在下面复制了我的 javascript。

var clearResultsBtn = document.querySelector("#clear-results");

function searchResults(e) {
  e.preventDefault()
  var searchInput = document.querySelector('input[name="movie-search"]')
  var searchInputVal = searchInput.value;
  var movieAPIkey = 'https://api.themoviedb.org/3/search/movie?api_key=f773dd7be92f1943bb6b98b40e74c3bf&query=' + searchInputVal;

  fetch(movieAPIkey)
    .then(function (response) {
      console.log(response);
      return response.json();
    })
    .then(function (data) {
      console.log(data);
      for (var i = 0; i < data.results.length; i++) {
        var resultsCard = document.createElement('button');
        resultsCard.onclick = resultsModalDisplay;
        resultsCard.innerHTML = data.results[i].original_title;
        document.querySelector('#results').append(resultsCard);
        clearResultsBtn.addEventListener("click", function() {
          for (var j = 0; j < data.results.length; j++) {
            resultsCard.innerHTML = [];
          }
        })
      }

      function resultsModalDisplay() {
        document.querySelector('#movie-title-filled').textContent = data[i].original_title;
        document.querySelector('#image').src = data[i].poster_path;
      }
    });
}