How can i remove previous searched items on next search

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

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

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

score 1 · Accepted Answer · edited Jul 08 '22 at 20:51

The easiest way would probably be to remove all children, that is clear the element's innerHTML. To avoid messing up the rest of the page, consider moving your images to a separate <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);
    }
  }
};

For more details on how to remove all children of an Html element, see this question.

score 1 · Answer 2 · answered Jul 03 '22 at 22:45

resultImagesDiv.innerHtml = ''; - This is wrong. It should be innerText instead.

resultImagesDiv.innerText = '';

I'm assuming this is for a certain online bootcamp video on Udemy. If so, everyone that finds this should have the solution for the extra credit part he doesn't give the answer to.

score 0 · Answer 3 · edited Mar 27 '23 at 08:47

const prevent = document.querySelector('#target')  const body = document.querySelectorAll('body')

prevent.addEventListener('click',function(e){
    e.preventDefault()
    getList()
    prevent.elements.query.value = ''
    clear()

   
    
})

const getList = async () =>{
    let searchInput = prevent.elements.query.value
    let param = {params:{q:searchInput}}
    try{
        const res = await axios.get(`https://api.tvmaze.com/search/shows`,param)
        for(let i of res.data ){
            if(i.show.image.medium){
                const img = document.createElement('img')
                img.src = i.show.image.medium
                document.body.append(img)
    
            }
        }
    }
    catch(e){
        console.log('Bad request',e)
    }
}

const clear = () =>{
    const img = document.querySelectorAll('img')
    for(let i of img){
        i.remove()
    }
}
document.querySelector('input').addEventListener('click', function(e){
e.stopPropagation();
})

<html lang = "en">
<head>
  <meta charset ="UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
  <link rel = "stylesheets" href = "apps.css">
  <script src = "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <h1>Movies Search</h1>
    <form action ="https://www.google.com" id="target">
      <input type = "text" placeholder = "Search Movie" name = "query">
      <button>Search</button>
    </form>


</html>

const prevent = document.querySelector('#target') const body = document.querySelectorAll('body')

prevent.addEventListener('click',function(e){
    e.preventDefault()
    getList()
    prevent.elements.query.value = ''
    clear()

   
     })

const getList = async () =>{
    let searchInput = prevent.elements.query.value
    let param = {params:{q:searchInput}}
    try{
        const res = await axios.get(`https://api.tvmaze.com/search/shows`,param)
        for(let i of res.data ){
            if(i.show.image.medium){
                const img = document.createElement('img')
                img.src = i.show.image.medium
                document.body.append(img)
    
            }
        }
    }
    catch(e){
        console.log('Bad request',e)
    } }

const clear = () =>{
    const img = document.querySelectorAll('img')
    for(let i of img){
        i.remove()
    } } document.querySelector('input').addEventListener('click', function(e){ e.stopPropagation(); })

    enter code here   <html lang = "en"> <head>   <meta charset ="UTF-8">   <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">   <link rel = "stylesheets" href = "apps.css">   <script src = "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>   </head>   <body>
    <h1>Movies Search</h1>
    <form action ="https://www.google.com" id="target">
      <input type = "text" placeholder = "Search Movie" name = "query">
      <button>Search</button>   </form> <div></div>

</html>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Mar 31 '23 at 07:04

score 0 · Answer 4 · edited Apr 24 '23 at 16:47

0

I added this to the makeImages function:

const existingImages = document.querySelectorAll('img');
    existingImages.forEach(img => img.remove());

edited Apr 24 '23 at 16:47

Anonymous

835
1
5
21

answered Apr 23 '23 at 18:42

forson baah

1
1

How can i remove previous searched items on next search

4 Answers4