увеличений шагов в цикле

Question

Почему-то при каждом нажатии на вариант из списка, каждый раз в верхнее поле добавляется 2 лишних варианта и стирается только изначальное состояние элемента, а то, что было добавлено потом, уже не стирается, и к нему просто прибавляется новое

function dropMenu(n) {
  let addressIn = n.querySelector(".price__addresses_in");
  let content = addressIn.querySelector(".price__addresses_content");

  let downMenu = n.querySelector(".price__addresses_content-down");

  if (downMenu.style.display == "none") {
    downMenu.style.display = "block";
  } else {
    downMenu.style.display = "none";
  };

  let addresses = downMenu.querySelectorAll(".price__addresses_content");

  addresses.forEach(el => {
    el.addEventListener('click', () => {
      let content = addressIn.querySelector(".price__addresses_content");
      content.innerHTML = "";
      content.insertAdjacentHTML('beforebegin', el.innerHTML);
      return
    })
    return
  })
}

.price__addresses_content {
  border: 1px solid black;
}

<div class="price__addresses" onclick="dropMenu(this)">
  <div class="price__addresses_in">
    <div class="price__addresses_content">
      <p class="price__addresses_text">Медцентр на Малой Юшуньской</p>
    </div>
    <button>&#8595</button>
  </div>
  <div class="price__addresses_content-down drop pord" style="display: none;">
    <div class="price__addresses_content">
      <p class="price__addresses_text">Медцентр на Малой Юшуньской</p>
    </div>
    <div class="price__addresses_content">
      <p class="price__addresses_text">Медцентр на Большой Юшуньской</p>
    </div>
    <div class="price__addresses_content">
      <p class="price__addresses_text">Медцентр на Средней Юшуньской</p>
    </div>
  </div>
</div>

Answer 1

добавляется 2 лишних варианта

Естественно. Вы на каждый клик добавляете обработчики событий. А потом они все выстреливают.

Answer 2

почему то всё решилось изменением content.insertAdjacentHTML('beforebegin', el.innerHTML);, а точнее 'beforebegin' заменил на 'afterbegin', но мне кажется, что это больше костыль

БЛОГ НА HUSL

увеличений шагов в цикле

Ответы (2 шт):