Не удается очистить результаты поиска при вводе нового поиска

Question

Я занимаюсь разработкой веб-приложения, которое выполняет поиск текстов с помощью Music Match Api, но у меня возникают проблемы с очисткой div, который выдает результаты, когда я выполняю другой поиск.может кто-нибудь, пожалуйста, помогите мне

вот сценарий

 $(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('');

    }

    });

вот фрагмент HTML-файла, который имеет два поля ввода, одно для имени исполнителя, а другое для имени песни и кнопку дляпредставление

<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

следующий код может помочь вам

function clearResults(){

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

    }

Answer 2

Добавляет результаты, потому что вы используете результат + = вместо результата =

Исправление:

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

    });

    }


    });

Я получил команду clearResults, поскольку она больше не нужна.