title: removeEventListener on class name after one click
body: <p>I'm trying to write some Javascript to get click event on all elements with class from an array. Everything works fine, but I need it unclickable only until second condition in <code>klikej()</code> function is met. Once the click event fires, then the item with that class shouldn't be clickable. I've tried using <code>removeEventListener</code> and/or handle it with <code>PreventDefaults()</code>, but nothing works. I need to use only vanilla Javascript - no jQuery or anything else. Could you please help me? </p>
  
  <pre><code>    poleRandomKaret.forEach(karta =&gt; {
      document.querySelectorAll(`.${karta}`).forEach(element =&gt; {
          element.addEventListener('click', event =&gt; {
              console.log("klik");
              klikej(event, element);
          });
      });
  });
  
  
  function klikej(event, element) {
      let kliknuteKarty = document.querySelectorAll('[data-ovoce]');
      if (kliknuteKarty.length &lt; 2) {
          element.setAttribute('data-ovoce', 'otoceno');
      }
      kliknuteKarty = document.querySelectorAll('[data-ovoce]');
      if (kliknuteKarty.length === 2) {
          kliknuteKarty[0].className === kliknuteKarty[1].className ? console.log("yes") : console.log("nope");
          kliknuteKarty.forEach(element =&gt; {
              element.removeAttribute("data-ovoce");
          });
      }
  }
  </code></pre>
  
  <p><strong>EDIT:</strong> The item shouldn't be clickable until the second condition in <code>klikej()</code> function is met. I'm trying to do memory game using vanilla JS. Function <code>klikej()</code> sets data attribute to an item and once there are two items with identical data attributes, it'll print in console "yes". If they're two different data attributes, they needs to be clickable again. </p>