Cannot Clear Search Results when entering new search

Cannot Clear Search Results when entering new search

Im developing a web app that searches lyrics using Music Match Api but im having trouble clearing the div that produces the results when im doing another search. can someone please help me

Im developing a web app that searches lyrics using Music Match Api but im having trouble clearing the div that produces the results when im doing another search. can someone please help me

heres the script

 $(document).ready(function(){

var results = '';

$('#submitButton').on('click',function(){

clearResults(); 
//get the artist name and tghe track name
var artistName = $('#searchArtistName').val();
var songName = $('#searchTrackName').val();
makeRequest(artistName,songName);
e.preventDefault();

});

function makeRequest(artistName,songName){



$.ajax({


url:"https://cors-anywhere.herokuapp.com/https://api.musixmatch.com/ws/1.1/matcher.lyrics.get?q_track="+artistName+"&q_artist="+songName+"&apikey=e87bc35119a5893655c3d0e2c3a4f40b",
type:'Get',
dataType:'json'

}).done(function(response){

//get the response and then append it to the card
var message = response.message.body.lyrics.lyrics_body;

console.log(response);


results += `

<div class="col-md-8">
<div class="card card-custom bg-white border-white z-depth-5" id = "myCard">
<div class="card-body" style="overflow-y: auto">
<i class = "fa fa-book fa-2x text-center"></i>
<h6 class="card-title" style = "font-size:22px;font-family:Comic Sans MS">Album <br>${message}</h6>
</div>
<div class="card-footer" style="background: inherit; border-color: inherit;">
</div>
</div>
</div>
 `;

$('#shower').html(results);

});

}

function clearResults(){

    $("#shower").html('');

}

});

heres a snippet of the html file which has two input fields one for artist name and the other for the song name and a button for submission

<div class = "container">
           <h4>Search to view lyrics</h4>
            <input type = "text" id = "searchArtistName" style="margin-top: 20px;" class = "form-control" placeholder="Enter Artist Name">
            <input type = "text" id = "searchTrackName" style="margin-top: 20px;" class = "form-control" placeholder="Enter Track Name">
            <br>
            <button type = "submit" class = "btn btn-info btn-lg" id = "submitButton">Search</button>
      </div>
    <div class = "container">
          <div id = "shower" class = "row"></div>
    </div>


jquery ajax

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

jQuery ajax get request method example

### jQuery Ajax Get Request Method Example This article is originally published at [https://www.tutsmake.com/jquery-api-ajax-get-method-example/](https://www.tutsmake.com/jquery-api-ajax-get-method-example/...

Hire Dedicated Jquery Developer

Are You Looking To Hire a jQuery Programmer? **[HourlyDeveloper.io](https://hourlydeveloper.io/ "HourlyDeveloper.io")**, a leading jQuery application development company, can help you build interactive front-end solutions to leapfrog the digital...

Ajax Form Submit examples using jQuery

In this jquery ajax form tutorial – you have learned how to send or submit the form data or multipart form using the jquery ajax on the server. Also, you have known the related queries of jquery ajax form.

jQuery Live -1 | jQuery AJAX Tutorial for Beginners | jQuery Tutorial

jQuery Live -1 | jQuery AJAX Tutorial for Beginners | jQuery Tutorial

ASP.NET MVC Application with JQuery, AJAX

Let's have a sample example: We have a submit button in our JQuery AJAX MVC application. Let's try to show a message when it is clicked. ASP.NET MVC Application - Using JQuery, AJAX