自定义Dropdown点击清除按钮后.selected类未移除问题排查

你的核心问题是事件处理逻辑中闭包变量的引用存在不确定性，导致类名修改未生效，同时缺少下拉选项选择的逻辑闭环（虽非当前直接问题，但会影响整体状态管理）。以下是具体修复步骤：

修复后的完整代码 #

JavaScript #

function activateDropdowns() {
  document.querySelectorAll(".custom-dropdown").forEach(dropdown => {
    const list = dropdown.querySelector(".dropdown-list");
    const clearBtn = dropdown.querySelector(".clear-btn");
    const selectedText = dropdown.querySelector(".selected-text");

    const dropdownClickHandler = function(event) {
      event.stopPropagation();

      if (event.target.classList.contains("clear-btn")) {
        console.log("Clear button clicked!");
        
        // 改用this指向当前触发事件的dropdown元素，避免闭包变量引用混乱
        this.classList.remove("selected");
        selectedText.textContent = "Select an option";
        clearBtn.style.display = "none";

        this.classList.remove("active");
        list.classList.remove("show");

        // 阻止同一元素上其他事件监听器执行，避免状态被意外修改
        event.stopImmediatePropagation();
      } else if (event.target.closest(".dropdown-header")) {
        console.log("Dropdown header clicked");

        // 关闭其他下拉菜单
        document.querySelectorAll(".custom-dropdown").forEach(d => {
          if (d !== this) {
            d.classList.remove("active");
            d.querySelector(".dropdown-list").classList.remove("show");
          }
        });

        this.classList.toggle("active");
        list.classList.toggle("show");
      } else if (event.target.tagName === "LI") {
        // 补充选项选择逻辑，完善选中状态闭环
        selectedText.textContent = event.target.textContent;
        this.classList.add("selected");
        clearBtn.style.display = "inline-block";

        this.classList.remove("active");
        list.classList.remove("show");
      }
    };

    // 先移除旧监听器，避免重复绑定导致逻辑冲突
    dropdown.removeEventListener("click", dropdownClickHandler);
    dropdown.addEventListener("click", dropdownClickHandler);
  });

  // 点击外部关闭所有下拉菜单
  document.addEventListener("click", function() {
    document.querySelectorAll(".custom-dropdown").forEach(dropdown => {
      dropdown.classList.remove("active");
      dropdown.querySelector(".dropdown-list").classList.remove("show");
    });
  });
}

// 确保DOM加载完成后再初始化
document.addEventListener("DOMContentLoaded", activateDropdowns);

CSS（无需修改） #

.custom-dropdown {
  position: relative;
  width: 200px;
  background: #E3DCC3;
  border-radius: 8px;
  cursor: pointer;
}

.dropdown-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: white;
}

.clear-btn {
  display: none;
  cursor: pointer;
}

.custom-dropdown.selected .clear-btn {
  display: inline-block;
}

.custom-dropdown.active .dropdown-list {
  display: block;
}

HTML（移除inline style，保持样式与状态一致） #

<div class="custom-dropdown selected active" id="locationDropdown">
  <div class="dropdown-header" tabindex="0">
    <span class="selected-text">Sapporo, Hokkaido</span>
    <span class="arrow">▼</span>
    <span class="clear-btn">✖</span>
  </div>
  <ul class="dropdown-list show">
    <li>Tokyo</li>
    <li>Osaka</li>
    <li>Sapporo, Hokkaido</li>
  </ul>
</div>

关键修复点说明 #

1. 改用this操作DOM元素：
   事件监听器中使用this替代外部闭包的dropdown变量，确保操作的是当前触发事件的下拉菜单元素，避免重复绑定事件导致的变量引用混乱。

2. 添加event.stopImmediatePropagation()：
   阻止同一元素上其他事件监听器执行，避免状态被意外修改回去。

3. 避免重复绑定事件：
   绑定新监听器前先移除旧监听器，确保每个下拉菜单只有一套事件处理逻辑。

4. 补充选项选择逻辑：
   添加下拉列表选项点击的处理逻辑，完善selected类的添加/移除闭环，保证状态管理的一致性。

5. 移除inline style：
   清除clear-btn的内联样式，由CSS规则控制显示，保持样式与状态的绑定关系。

内容的提问来源于stack exchange，提问作者ZARIFA AYDAYEVA