Javascript 如何根据用户输入更改页面内容？

[从概念上讲] 到目前为止我所做的： 用户将输入一个单词：让我们说“狗”。点击“提交”按钮后，页面将弹出一个狗图片和每只狗的信息表

我希望做的是： 如果用户决定搜索另一种动物，比如说“猫”，我希望我的狗图片全部删除，基本上重新开始

这是可以用几行代码来完成的吗？这不是我项目任务的一部分，但我在测试我的网站时注意到，我只能搜索一次。在那之后，我认为它再次调用了所有内容，并且似乎创建了更多的列（但是你看不到它们，因为没有足够的空间）

我在想，如果我可以检查我的div class=“results playlist”是否为空，那么我可以使用.empty（）或.remove（）重新开始

下面是一个代码片段（它不起作用，因为它只是向sorta显示我的代码的大纲）

$（文档）。准备好了吗(
如果（$（））
//单击搜索按钮时查询soundcloud API
$（“#搜索按钮”）。在（'click'，function（）上{
var input=$（'#input'）.val（）；
$（'#input'）.val（''）；
callAPI（输入）；
$（'.results playlist'）。追加(
“搜索结果我的播放列表”）；
}));

HW 04高级Javascrip和JQuery
搜寻
正如您所说，只需使用
.empty（）

$（'searchButton'）。在（'click'，function（）上{
var input=$（'#input'）.val（）；
$（'#input'）.val（''）；
callAPI（输入）；
$（'.results playlist'）.empty（）.append(
“搜索结果我的播放列表”）；
}));
每次插入新的搜索查询时，都可以使用replace（）替换页面的元素。将查询与数据库匹配，然后单击刷新页面。太棒了！非常感谢。
$('#searchButton').on('click', function() {
    var input = $('#input').val();
    $('#input').val('');
    callAPI(input);
    $('.results-playlist').empty().append(
        '<div class="column" id="resultsContainer"><h2>Search Results</h2><div id="results-list"></div></div><div class="column" id="playlistContainer"><h2>My Playlist</h2><div id="play-list"></div></div>');
}));