Cannot Clear Search Results when entering new search

Question

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>

Answer 1

the following code may help you

function clearResults(){

        $("#shower").children().remove();

    }

Answer 2

It's appending the results because you use result+= instead of result =

Correction :

 $(document).ready(function(){

    var results = '';

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


    });

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

    });

    }


    });

I got ride of clearResults as it should not be needed anymore.