There is a markup, I add it to js , using 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>

When another item is selected, the button from the past item is deleted and the new button is added.

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

My div with the button_green class after after for example 10 times viewing items remains in the DOM. Since here my div with the button_green class button_green assigned an empty string, but the div itself remains. When I change the line elem[i].innerHTML = ''; on elem[i].remove(); then the creak when you select any third item, there are two buttons. Why does this happen and how can I avoid it? Or advice on how to remove my div with the button_green class completely?

    1 answer 1

    getElementsByClassName returns a “refreshing” collection:

    https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

      for(var i = elem.length - 1; i >= 0; i--){ elem[i].remove(); }