Custom Dropdown Remains Selected Even After Clicking Clear Button

Question

I am building a custom dropdown menu using JavaScript and CSS, and I want the clear button to reset the selection. However, even after clicking the clear button, the dropdown remains selected, and the selected class is not removed properly.

Expected Behavior:

Clicking the clear button (.clear-btn) should:
Remove the selected class from the dropdown.
Reset the selected text to "Select an option".
Hide the clear button.
Close the dropdown list.

Current Behavior:

The clear button resets the text, but the dropdown remains selected.
The selected class does not get removed properly.
The dropdown stays open instead of closing.

Code Below:

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>

Steps that I have tried:

Logged the clear button click event → It fires correctly.
Manually removed the .selected class in DevTools → It works there.
Tried .classList.toggle("selected") instead of .remove() → No change.
Checked if any CSS styles are preventing changes → Nothing found.

Question:

Why is my .selected class not being removed properly when I click the clear button?

Is my event delegation incorrect?
Could CSS be overriding the class change?
Am I missing an additional property that needs to be reset?

When I click on the clear button the selected class is removed when I check the Elements tab in DevTools. Why do you think it's not working? — Barmar
– Barmar, Commented Mar 5 at 22:11
I ran the code snippet from the code you provided. The .selected class gets removed when you click the X. Is that not the desired functionality? — dctech
– dctech, Commented Mar 6 at 7:12

ebenezer · Accepted Answer · 2025-03-06 09:15:33Z

Its possible that this is your browser interfering with your component. Try a few other browsers and see if the behavior changes.

A potential fix would be to manage the state of your drop down using Javascript.

i.e. Store an array of the options and their "selected state" then update that based on the users actions, so when the user clicks clear, you can map the array to set them all to false.

Something like this:


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

Then the clear function would be something like:


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

Similarly for the drop down not closing, you could store a state for that too.

If I may, and not trying to stop you, but its a bit of an anti-pattern to be managing a component like this by adding and removing classes and using query selectors for everything. Rather make a function that takes an array of options and builds out the drop down from them, this will also make the management of the state a little easier.

reference for the above: JavaScript - populate drop down list with array

Collectives™ on Stack Overflow

Custom Dropdown Remains Selected Even After Clicking Clear Button

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related