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>


Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

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/...

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.

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