如何删除单击按钮时创建的圆圈？

Question

我正在搜索领域。我有一个文本字段和滑块。用户可以在文本字段中进行搜索，该搜索将随列表一起提供一个下拉菜单，用户可以选择任何一个。选定后，用户可以单击一个按钮，该按钮会将标记添加到我的地图中。滑块用于在所选标记周围创建一个圆圈。一切正常。

我的问题是在圈出后，如果用户搜索新位置并单击搜索按钮，我想重设此圈或删除该圈。这是我现在正在使用的代码，它将滑块重置为0，但圆没有重置。

html

<input class="prompt" type="text">

<a class="item" onclick="openSearching()">
    Search
</a>

<input type="range" min="0" max="5000" value="0" class="slider" id="myRange">
<p>Radius:
    <span id="demo"></span>
</p>

js

$('.prompt').keyup(function (event) {
    if (event.keyCode == 13) {
        openSearching();
    }
}

var openSearching = function () {
    ...
    ...
    resetSlider();
}


let slider = document.getElementById('myRange');
let output = document.getElementById('demo');
output.innerHTML = slider.value + scale;

slider.oninput = function (val) {
    if(val == 0){
        output.innerHTML = 0 + scale;
        circle.setRadius(0);
    }
    output.innerHTML = this.value + scale;
    circle.setRadius(this.value);

}
const resetSlider = function() {
    var output = document.getElementById('demo');
    var slider = document.getElementById('myRange');
    slider.value = 0;
    output.innerHTML = 0 + scale;
    slider.oninput(val = 0);
}

第二次搜索后，我得到了这样的圈子。