CODEWITHSUNDEEP
javascripthtmlwebapiasync.js
Mian Waleed
Mian Waleed

Reputation: 3

How can i remove previous searched items on next search

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

Upvotes: 0

Views: 1232

Answers (4)

forson baah
forson baah

Reputation: 1

I added this to the makeImages function:

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

Upvotes: 0

Scaplog
Scaplog

Reputation: 35

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>

Upvotes: 0

user16603402
user16603402

Reputation:

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.

Upvotes: 1

Messier 43
Messier 43

Reputation: 11

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.

Upvotes: 1

Related Questions