即使在单击“清除”按钮

Question

单击“清除”按钮（

.clear-btn

）应：

从下拉菜单中删除所选类。
• 将所选文本重新为“选择一个选项”。

  掩盖了清除按钮。
  

  列出下拉列表。
• 电流行为：
清除按钮重置文本，但仍选择下拉。
• 选定的课程无法正确删除。
下拉列表保持开放而不是关闭。
代码下面：

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");

    dropdown.addEventListener("click", function(event) {
      event.stopPropagation(); // Prevents dropdown from closing immediately

      if (event.target.classList.contains("clear-btn")) {
        console.log("Clear button clicked!"); // Debugging Step 1

        dropdown.classList.remove("selected"); // ❌ This doesn't seem to remove the class properly
        selectedText.textContent = "Select an option";
        clearBtn.style.display = "none";

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

      } else if (event.target.closest(".dropdown-header")) {
        // Toggle dropdown only if clicking on header (not clear-btn)
        console.log("Dropdown header clicked");

        document.querySelectorAll(".custom-dropdown").forEach(d => {
          if (d !== dropdown) {
            d.classList.remove("active");
            d.querySelector(".dropdown-list").classList.remove("show");
          }
        });

        dropdown.classList.toggle("active");
        list.classList.toggle("show");
      }
    });
  });

  // Close dropdown when clicking outside
  document.addEventListener("click", function() {
    document.querySelectorAll(".custom-dropdown").forEach(dropdown => {
      dropdown.classList.remove("active");
      dropdown.querySelector(".dropdown-list").classList.remove("show");
    });
  });
}
activateDropdowns();

.custom-dropdown {
  position: relative;
  width: 200px;
  background: #E3DCC3;
  /* Neutral beige */
  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;
}

<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" style="display: inline-block;">✖</span>
  </div>
  <ul class="dropdown-list show">
    <li>Tokyo</li>
    <li>Osaka</li>
    <li>Sapporo, Hokkaido</li>
  </ul>
</div>

我尝试过的步骤：

删除了清除按钮点击事件→它正确触发。

手工删除DevTools中的.Selected类→它在此处工作。 tried .classlist.toggle（“ selected”）而不是.remove（）→无更改。

检查是否有任何CSS样式阻止更改→找不到。

问题：

当我单击“清除”按钮时，为什么我的

.selected

课程不正确删除？

我的活动委派不正确？ cs可以覆盖类的变化吗？

我缺少需要重置的其他属性？

• 有可能这是您的浏览器干扰组件。尝试其他一些浏览器，看看行为是否改变。
潜在的修复是使用JavaScript管理下拉的状态。
• I.E。存储选项的数组及其“选定状态”，然后根据用户操作进行更新，因此当用户单击“清晰”时，您可以映射数组以将它们全部设置为false。 像这样的东西：

•     let drop_down_options = [
      {is_selected: false, 
      label: 'Tokyo', 
      value: 'tokyo'}, 
      {etc}
      ]

然后清晰的功能将是：

drop_down_options.map((option)=>{option.is_selected=false})

相似，您也可以为此存储一个状态。

如果我可能并且不要试图阻止您，但是通过添加和删除类并为所有内容使用查询选择器来管理这样的组件是一个反模式。宁愿制作一个函数，可以采用一系列选项并从中构建下拉菜，这也将使国家的管理变得更加容易。

上述文章：

javascript-填充阵列的填充下拉列表