搜索新内容时如何清除API返回的已展示图片？

当前问题：首次搜索展示图片后，再次搜索新内容时，旧图片不会被删除，新图片会追加在旧图片之后。需求是每次搜索仅显示当前结果的图片。

方案一：使用专用容器管理搜索结果（推荐） #

这种方式通过独立容器存放所有搜索结果图片，既能精准清空旧内容，也能避免影响页面其他元素。

1. 修改HTML结构 #

在表单下方添加一个用于存放图片的容器：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TV Show Search</title>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/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>
    <!-- 新增结果容器 -->
    <div id="resultsContainer"></div>
    
    <script src="app.js"></script>
</body>
</html>

2. 更新JavaScript代码 #

修改逻辑，每次搜索前清空容器，并将新图片添加到容器中：

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

form.addEventListener('submit', async function(e) {
    e.preventDefault();
    const searchTerm = form.elements.query.value;
    const config = { params: { q: searchTerm } };
    const res = await axios.get('https://api.tvmaze.com/search/shows', config);
    
    form.elements.query.value = '';
    // 清空旧结果
    resultsContainer.innerHTML = '';
    makeImages(res.data);
});

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

方案二：直接删除页面中的旧图片 #

如果不想修改HTML，可以在每次搜索前删除页面上所有之前生成的剧集图片：

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

form.addEventListener('submit', async function(e) {
    e.preventDefault();
    const searchTerm = form.elements.query.value;
    const config = { params: { q: searchTerm } };
    const res = await axios.get('https://api.tvmaze.com/search/shows', config);
    
    form.elements.query.value = '';
    // 删除所有已存在的图片
    document.querySelectorAll('img').forEach(img => img.remove());
    
    makeImages(res.data);
});

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

注意：方案二会删除页面上所有<img>元素，如果页面存在其他图片（如logo），会被误删，因此优先推荐方案一。

内容的提问来源于stack exchange，提问作者Arash Peer Mohammad