javascript - 如何在下次搜索时删除以前搜索过的项目
问题描述
从用户搜索的内容开始获取所有电影的图像只是想在每次下一次搜索时删除以前的图像我该怎么做
<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)
}
}
}
如何在下次搜索时删除以前的图像
解决方案
最简单的方法可能是删除所有子元素,即清除元素的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 元素的所有子元素的更多详细信息,请参阅此问题。
推荐阅读
- javascript - 日期更改间隔
- matlab - 1不等于1?MATLAB中的矩阵条目比较
- .net - 从 .net 核心 API 返回纯文本/非 JSON 数据
- r - 具有两种字体大小的单行 ggplot2 标题
- python - Numpy 函数输出随着每次运行而增加
- javascript - JQuery 检索 ICS 文件作为文本
- google-apps-script - 如何“部署为表格插件...”以分发带有预安装插件的表格?
- java - var 是什么意思
用Java做? - html - 错误类型错误:_co.getAdmin 不是函数
- c++ - 什么可能导致非阻塞套接字阻塞“recv”?