删除local的数据的同时删除本地的对应HTML标签

想通过dataset-index的值删除对应的html元素起到一个删除一个数据展示区就会删除对应的html标签，但是采用重新执行ShowBox()；会叠加而不是替换原有的展示区的内容，删除按钮采用的是for循环方法添加的点击事件。
功能是要求删除对应的local store数据的同时删除对应展示区的html标签，并不影响到删除按钮的正常使用。
我自己采用的是data-index值删除本地的html对应标签和local store数据，问题是随便删除其中一个后，再次删除最后一个标签时会出现localstore正常删除了但是删除本地标签直接报错，remove删除标签方法的问题无法解决

<div class="SearchTake-SearchStore-suggest-menu">
        <div class="SearchTake-SearchStore-suggest-menu-head">
            <span>最近搜索过</span>
            <span class="SearchTake-SearchStore-suggest-delete-whole">全部删除</span>
        </div>
        <div class="show-box"></div>
    </div>

Tab_search_hd.addEventListener('click',function(){
                var inputVal = SF.value;
                var StoreVal = inputVal.split(SL).join('');
                var e = ECode(StoreVal);
                var d = IDCode();
                var off = false;
                var s = {
                        key:e,
                        value:StoreVal,
                        name:d,
                };
                if(inputVal == n || inputVal == null || inputVal == undefined){
                        return false;
                };
                if(StoreGain.length >= 15){
                        StoreGain.splice(14),1;
                };
                for(var i = 0 ; i < StoreGain.length; i++){
                        if(StoreGain[i].value === s.value){
                                off = true;
                                break;
                        };
                };
                if(!off){
                        StoreGain.unshift(s);
                        localStorage.setItem('SearchStore',JSON.stringify(StoreGain));
                };
        });

function del(){
                var del = document.getElementsByClassName('SearchTake-SearchStore-suggest-menu-delete');
                for(var i = 0 ; i < del.length; i++){
                        del[i].addEventListener('click',function(e){
                               var len = e.target.dataset.index;
                               /*StoreGain.splice(len,1);
                               localStorage.setItem('SearchStore',JSON.stringify(StoreGain));*/
                               document.getElementsByClassName('SearchTake-SearchStore-suggest-menu-show')[len].remove();
                               console.log(len);
                              if(StoreGain == n){
                                SearchTake_SearchStore_menu.style.visibility = 'hidden';
                              };
                        });
                };
        };

function ShowBox(){
                for(var i = 0; i < StoreGain.length; i++){
                        var s = StoreGain[i].value;
                        var k = JSON.stringify(StoreGain[i].key);
                        show_box.innerHTML += `<div class='SearchTake-SearchStore-suggest-menu-show' data-key=${k} data-index=${i}><span class='SearchTake-SearchStore-menu-suggest-val'>${s}</span><span class='SearchTake-SearchStore-suggest-menu-delete' data-index=${i}>删除</span></div>`; 
                };
        };

未删除任何行时，data-index 与 .SearchTake-SearchStore-suggest-menu-show元素在document.getElementsByClassName('SearchTake-SearchStore-suggest-menu-show')中的索引是一致的。
假设一共有10行，第一行的data-index = 0，最后一行的data-index = 9，现在删除第一行，最后一行的data-index不变，还是9，但是最后一行的 .SearchTake-SearchStore-suggest-menu-show元素在document.getElementsByClassName('SearchTake-SearchStore-suggest-menu-show')中的索引是8（因为现在就剩9个元素了，而列表索引从0开始，所以最后一个元素的索引就是8）。data-index 与 .SearchTake-SearchStore-suggest-menu-show元素在document.getElementsByClassName('SearchTake-SearchStore-suggest-menu-show')中的索引不一致，删除时就会与预期不一致。
修改方案：

var len = e.target.dataset.index;
/*StoreGain.splice(len,1);
localStorage.setItem('SearchStore',JSON.stringify(StoreGain));*/
document.getElementsByClassName('SearchTake-SearchStore-suggest-menu-show')[len].remove();

可以改成

// 直接获取父节点，然后删除
e.target.parentNode.remove();