如何在下次搜索时删除以前搜索过的项目

Question

Getting images of all the movies starting with what user searched for just want to remove previous images on every next search how can i do that从用户搜索的内容开始获取所有电影的图像只是想在每次下一次搜索时删除以前的图像我该怎么做

<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 Starts From Here JavaScript 从这里开始

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

Added an eventlistener on form.在表单上添加了一个事件监听器。

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);

Getting results from an api从 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)
    }
}
}

How can i remove previous images on next search如何在下次搜索时删除以前的图像

Answer 1

The easiest way would probably be to remove all children, that is clear the element's innerHTML .最简单的方法可能是删除所有子元素，即清除元素的innerHTML 。 To avoid messing up the rest of the page, consider moving your images to a separate <div> :为避免弄乱页面的其余部分，请考虑将图像移动到单独的<div> ：

html: html:

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

js: 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);
    }
  }
};

For more details on how to remove all children of an Html element, see this question .有关如何删除 Html 元素的所有子元素的更多详细信息，请参阅此问题。

Answer 2

resultImagesDiv.innerHtml = ''; resultImagesDiv.innerHtml = ''; - This is wrong. - 这是错误的。 It should be innerText instead.它应该是 innerText 。

resultImagesDiv.innerText = ''; resultImagesDiv.innerText = '';

I'm assuming this is for a certain online bootcamp video on Udemy.我假设这是针对 Udemy 上的某个在线训练营视频。 If so, everyone that finds this should have the solution for the extra credit part he doesn't give the answer to.如果是这样，每个发现这个问题的人都应该有他没有给出答案的额外信用部分的解决方案。

如何在下次搜索时删除以前搜索过的项目

问题描述

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