每次调用后如何删除 addEventListener

Question

我有两种类型的下拉列表，我想从选定的下拉列表中选择项目，并将其附加到列表中。第一次单击下拉按钮并从中选择项目后，每次单击都会在列表中返回重复的附加项。

    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>

这里是示例代码，我用谷歌搜索了谷歌和堆栈溢出，但同样的问题没有运气

Answer 1

只需使用类引用列表中的每个元素（示例：dropdown-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;

      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>