如何在下次搜索時刪除以前搜索過的項目

Question

從用戶搜索的內容開始獲取所有電影的圖像只是想在每次下一次搜索時刪除以前的圖像我該怎么做

<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport"     content="width=device-width, initial-  scale=1.0">
<title>TV Show Search</title>

<script     src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

</head>

<body>
<h1>TV Show Search</h1>
<form id="searchForm">
    <input type="text" placeholder="TV Show Title" name="query">
    <button>Search</button>
</form>
<script src="app.js"></script>
</body>

</html>

JavaScript 從這里開始

const form =   document.querySelector('#searchForm');

在表單上添加了一個事件監聽器。

form.addEventListener('submit', async     function (e) {
e.preventDefault();
const searchTerm =     form.elements.query.value;
const config = { params: { q:    searchTerm } }
var res = await     axios.get(`http://api.tvmaze.com/search/shows`, config);

從 api 獲取結果

makeImages(res.data)
form.elements.query.value = '';

})



const makeImages = (shows) => {
for (let result of shows) {
    if (result.show.image) {
        const img =    document.createElement('IMG');
           img.src=result.show.image.medium;
        document.body.append(img)
    }
}
}

如何在下次搜索時刪除以前的圖像

Answer 1

最簡單的方法可能是刪除所有子元素，即清除元素的innerHTML 。 為避免弄亂頁面的其余部分，請考慮將圖像移動到單獨的<div> ：

html:

<!-- ... -->
</form>
<div id="resultImages"></div>
<script src="app.js"></script>
<!-- ... -->

js：

const resultImagesDiv = document.getElementById('resultImages');

const makeImages = (shows) => {
  resultImagesDiv.innerHTML = ''; // Clear all previous images
  for (let result of shows) {
    if (result.show.image) {
      const img = document.createElement("img");
      img.src = result.show.image.medium;
      resultImagesDiv.appendChild(img);
    }
  }
};

有關如何刪除 Html 元素的所有子元素的更多詳細信息，請參閱此問題。

Answer 2

resultImagesDiv.innerHtml = ''; - 這是錯誤的。 它應該是 innerText 。

resultImagesDiv.innerText = '';

我假設這是針對 Udemy 上的某個在線訓練營視頻。 如果是這樣，每個發現這個問題的人都應該有他沒有給出答案的額外信用部分的解決方案。

如何在下次搜索時刪除以前搜索過的項目

問題描述

2 個解決方案

解決方案1
0 已采納

解決方案2
0 2022-07-03 22:45:14

如何在下次搜索時刪除以前搜索過的項目

問題描述

2 個解決方案

解決方案1 0 已采納

解決方案2 0 2022-07-03 22:45:14

解決方案1
0 已采納

解決方案2
0 2022-07-03 22:45:14