How to remove addEventListener after calling it each time

Question

I have two types of dropdowns, I want to select item from selected dropdown, and append it on list. After clicking dropdown button first time and select item from it, each next clicks return duplicate appends on list.

    document.querySelector('.selected-items').addEventListener('click', e => {
      const overlay = document.querySelector('.hidden-overlays-select')
      const button = e.target.classList.contains('select-option')

      rect = e.target.parentElement.getBoundingClientRect()
      row = e.target.parentElement;

      addItem(row);

      overlay.style.display = 'inline-block'
      overlay.style.top = Math.round(rect.top) + 'px';
      overlay.style.left = Math.round(rect.left) + 'px';

    });

    addItem = (row) => {
      document.querySelectorAll('.dropdown-list .list').forEach(list =>
        list.addEventListener('click', e => {
          let option = e.target.classList.contains('list');
          option = e.target.textContent;
          if (option) {
            const li = `
              <li class="select-option" style="margin-right: 1rem;">
                ${option}
              </li>`;
            row.insertAdjacentHTML("beforeend", li)
          }

          document.querySelector('.hidden-overlays-select').style.display = 'none'
        }));
    }

li {
    cursor: pointer;
    list-style: none;
  }

  .hidden-overlays-select {
    position: absolute;
    display: none;
    margin-top: .5rem;
  }

<div class="hidden-overlays-select">
    <ul class="dropdown-list">
      <li class="list">Test One</li>
      <li class="list">Test Two</li>
      <li class="list">Test Three</li>
      <li class="list">Test Four</li>
    </ul>
    <ul class="dropdown-list">
      <li class="list">Test One</li>
      <li class="list">Test Two</li>
      <li class="list">Test Three</li>
      <li class="list">Test Four</li>
    </ul>
  </div>

  <div class="selected-items d-flex align-items-center flex-fill">
    <ul style="display: flex;">
      <li class="select-option" style="margin-right: 1rem;">
        Click Me
      </li>
    </ul>
  </div>

Here is the sample codes, I did googling both google and stack overflow, but no luck with the same issue

Answer 1

Just have a reference to each element in your list by using the class (Example: dropdown-list) Here's a working solution:

   document.querySelector('.selected-items').addEventListener('click', e => {
  
      const overlay = document.querySelector('.hidden-overlays-select')
      const button = e.target.classList.contains('select-option')

      rect = e.target.parentElement.getBoundingClientRect()
      row = e.target.parentElement;

      overlay.style.display = 'inline-block'
      overlay.style.top = Math.round(rect.top) + 'px';
      overlay.style.left = Math.round(rect.left) + 'px';

    });


    const el = document.querySelectorAll('.dropdown-list');
    el.forEach(function(item, index){
          item.addEventListener('click', function (e) {
            var option = e.target.textContent;
            if (option) {
              const li = `
                <li class="select-option" style="margin-right: 1rem;">
                  ${option}
                </li>`;
              row.insertAdjacentHTML("beforeend", li);
            }
            document.querySelector('.hidden-overlays-select').style.display = 'none';
        });
    });

li {
    cursor: pointer;
    list-style: none;
  }

  .hidden-overlays-select {
    position: absolute;
    display: none;
    margin-top: .5rem;
  }

<div class="hidden-overlays-select">
    <ul class="dropdown-list">
      <li class="list">Test One</li>
      <li class="list">Test Two</li>
      <li class="list">Test Three</li>
      <li class="list">Test Four</li>
    </ul>
    <ul class="dropdown-list">
      <li class="list">element 1</li>
      <li class="list">element 2</li>
      <li class="list">element 3</li>
      <li class="list">element 4</li>
    </ul>
  </div>

  <div class="selected-items d-flex align-items-center flex-fill">
    <ul style="display: flex;">
      <li class="select-option" style="margin-right: 1rem;">
        Click Me
      </li>
    </ul>
  </div>