Проблема с удалением div

Есть разметка, я ее добавляю в js, с помощью insertAdjacentHTML

    <a class="button_green" href="${array_for_href[i]}" target="_blank">
        <span class="action_button_left"></span>
        <span class="action_button_contents">${name_market[i]}</span>
        <span class="action_button_right"></span>
        <span class="action_button_preload"></span>
    </a>

Когда выбирается другой предмет, то кнопка от прошлого предмета удаляется и кнопка нового добавляется.

function delete_for_button_green(){
    var elem = document.getElementsByClassName("button_green");
    if (elem.length > 0) {
        for(var i = 0; i < elem.length; i++){
            elem[i].remove();
        }
    }
}

Мой div с классом button_green после после например 10 раз просмотра предметов остается в DOM. Так как тут моему div с классом button_green присваивается пустая строка, а сам div остается. Когда я меняю строчку elem[i].innerHTML = ''; на elem[i].remove(); то скрип когда выбираешь любой третий предмет, остаются две кнопки. Почему это происходит и как можно избежать? Или совет как удалить мой div с классом button_greenполностью?