title: JavaScript - Can't deselect a button without causing the page to reload
body: <p>I have a row of buttons that I can select. I only want to be able to select one button at a time.
  If I deselect the last selected button, it causes the page to reload when I actually just want all buttons deselected. Is there a way to accomplish this?</p>
  <p><a href="https://jsfiddle.net/donfontaine12/um05k6cw/33/#&amp;togetherjs=Hm5JqaEvUi" rel="nofollow noreferrer">https://jsfiddle.net/donfontaine12/um05k6cw/33/#&amp;togetherjs=Hm5JqaEvUi</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let rankedNo1 = document.querySelector("#ranked_no1");
  let rankedNo2 = document.querySelector("#ranked_no2");
  let rankedNo3 = document.querySelector("#ranked_no3");
  let rankedNo4 = document.querySelector("#ranked_no4");
  let rankedNo5 = document.querySelector("#ranked_no5");
  let rankedNo6 = document.querySelector("#ranked_no6");
  let rankedNo7 = document.querySelector("#ranked_no7");
  let rankedNo8 = document.querySelector("#ranked_no8");
  let rankedNo9 = document.querySelector("#ranked_no9");
  let rankedNo10 = document.querySelector("#ranked_no10");
  
  let rankedNoArray = [rankedNo1, rankedNo2, rankedNo3, rankedNo4, rankedNo5, rankedNo6, rankedNo7, rankedNo8, rankedNo9, rankedNo10];
  
  rankedNo1.addEventListener("click", function() {
    toggleHighlight(rankedNo1);
    event.preventDefault();
  });
  rankedNo2.addEventListener("click", function() {
    toggleHighlight(rankedNo2);
    event.preventDefault();
  });
  rankedNo3.addEventListener("click", function() {
    toggleHighlight(rankedNo3);
    event.preventDefault();
  });
  rankedNo4.addEventListener("click", function() {
    toggleHighlight(rankedNo4);
    event.preventDefault();
  });
  rankedNo5.addEventListener("click", function() {
    toggleHighlight(rankedNo5);
    event.preventDefault();
  });
  rankedNo6.addEventListener("click", function() {
    toggleHighlight(rankedNo6);
    event.preventDefault();
  });
  rankedNo7.addEventListener("click", function() {
    toggleHighlight(rankedNo7);
    event.preventDefault();
  });
  rankedNo8.addEventListener("click", function() {
    toggleHighlight(rankedNo8);
    event.preventDefault();
  });
  rankedNo9.addEventListener("click", function() {
    toggleHighlight(rankedNo9);
    event.preventDefault();
  });
  rankedNo10.addEventListener("click", function() {
    toggleHighlight(rankedNo10);
    event.preventDefault();
  });
  
  function toggleHighlight(r) {
    let highlighted = lastHighlighted();
    if (highlighted) {
      for (let h of highlighted) {
        if (h == r) {
          r.firstElementChild.classList.remove("selected");
          highlighted[h.index].remove();
        } else {
          h.firstElementChild.classList.remove("selected");
          if (r.firstElementChild.classList.contains("selected")) {
            r.firstElementChild.classList.remove("selected");
          } else {
            r.firstElementChild.classList.add("selected");
          }
        }
      }
    } else {
      if (r.firstElementChild.classList.contains("selected")) {
        r.firstElementChild.classList.remove("selected");
      } else {
        r.firstElementChild.classList.add("selected");
      }
    }
  }
  
  function lastHighlighted() {
    let highlightedNos = rankedNoArray.filter(x =&gt; x.firstElementChild.classList.contains("selected"));
    return highlightedNos;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#rank_flex_combo #ranked_nos,
  #rank_flex_combo,
  #ranked_no,
  #ranked_no1,
  #ranked_no2,
  #ranked_no3,
  #ranked_no4,
  #ranked_no5,
  #ranked_no6,
  #ranked_no7,
  #ranked_no8,
  #ranked_no9,
  #ranked_no10 {
    display: flex;
    flex-direction: row;
    margin: 0em 0.5em;
  }
  
  #ranked_nos a,
  #ranked_no1 a,
  #ranked_no2 a,
  #ranked_no3 a,
  #ranked_no4 a,
  #ranked_no5 a,
  #ranked_no6 a,
  #ranked_no7 a,
  #ranked_no8 a,
  #ranked_no9 a,
  #ranked_no10 a {
    font-weight: bold;
    text-decoration: none;
    padding: 0.25em 0.5em;
    color: dodgerblue;
    background-color: lightcyan;
    border: 2px solid cyan;
    border-radius: 5px;
  }
  
  #ranked_nos .selected,
  #ranked_no1 .selected,
  #ranked_no2 .selected,
  #ranked_no3 .selected,
  #ranked_no4 .selected,
  #ranked_no5 .selected,
  #ranked_no6 .selected,
  #ranked_no7 .selected,
  #ranked_no8 .selected,
  #ranked_no9 .selected,
  #ranked_no10 .selected {
    color: mediumpurple;
    background-color: lavender;
    border: 2px solid mediumpurple;
  }
  
  #ranked_no a {
    font-weight: bold;
    text-decoration: none;
    padding: 0.25em 2em;
    color: dodgerblue;
    background-color: white;
    border: 2px solid cyan;
    border-radius: 5px;
  }
  
  #ranked_no1 a:hover,
  #ranked_no2 a:hover,
  #ranked_no3 a:hover,
  #ranked_no4 a:hover,
  #ranked_no5 a:hover,
  #ranked_no6 a:hover,
  #ranked_no7 a:hover,
  #ranked_no8 a:hover,
  #ranked_no9 a:hover,
  #ranked_no10 a:hover {
    color: mediumpurple;
    background-color: lavender;
    border: 2px solid mediumpurple;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="rank_flex_combo"&gt;
    &lt;div id="ranked_no"&gt;
      &lt;a href=""&gt;Rank No.&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="ranked_no1"&gt;
      &lt;a href="" class="selected"&gt;1&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="ranked_no2"&gt;
      &lt;a href=""&gt;2&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="ranked_no3"&gt;
      &lt;a href=""&gt;3&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="ranked_no4"&gt;
      &lt;a href=""&gt;4&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="ranked_no5"&gt;
      &lt;a href=""&gt;5&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="ranked_no6"&gt;
      &lt;a href=""&gt;6&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="ranked_no7"&gt;
      &lt;a href=""&gt;7&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="ranked_no8"&gt;
      &lt;a href=""&gt;8&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="ranked_no9"&gt;
      &lt;a href=""&gt;9&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="ranked_no10"&gt;
      &lt;a href=""&gt;10&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>