title: in JavaScript - select all elements with same class - except clicked one
body: <p><strong>in JavaScript</strong> - select all elements with same class - except clicked one </p>
  
  <p>currently i am getting a result that works fine, but checking for a smart and simple solution </p>
  
  <p>there are similar answers available using jquery <code>not</code></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 color = document.querySelectorAll('.color');
  
  let length = color.length;
  
  // for (let i = 0; i &lt; length; i++) {
  //     color[i].onclick = () =&gt; {
  //         color[i].classList.toggle('gold');
  //     }
  // }
  
  
  
  // if gold exists on clicked element then remove it  
  // if gold not exists on clicked element then remove from all element and add only on clicked element
  for (let i = 0; i &lt; length; i++) {
      color[i].onclick = () =&gt; {
          if (color[i].classList.contains('gold')) {
              color[i].classList.toggle('gold');  // remove / toggle
          } else {
              for (let x = 0; x &lt; length; x++) {
                  color[x].classList.remove('gold');
              }
              color[i].classList.toggle('gold');  // add / toggle
          }
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main {
      display: flex;
      justify-content: center;
  }
  .color {
      margin: 5px;
      width: 100px;
      height: 100px;
      border: 1px solid #ddd;
  }
  
  .gold {
      background-color: gold;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main"&gt;
      &lt;div class="color"&gt;&lt;/div&gt;
      &lt;div class="color"&gt;&lt;/div&gt;
      &lt;div class="color"&gt;&lt;/div&gt;
      &lt;div class="color"&gt;&lt;/div&gt;
      &lt;div class="color"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/zzxgruo1/" rel="nofollow noreferrer">demo</a></p>
  
  <hr>