title: grab special attribute values on click
body: <p>Check the code below. Html displays three images which contain a special attr called- <code>data-cc</code>. And all of those 3 images <code>data-cc</code> attr value stored on an array called- <code>coll</code>. What I want is when clicking on any of those images that <code>data-cc</code> value will be removed from the array named <code>coll</code>. Right now I'm already able to remove a specific value from array collection but the problem is I hardcoded on return <code>value != 1;</code> like this way. How can I remove value as per image clicked?  </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>$(document).ready(function() {
    var coll = [];
    $('[data-cc]').each(function() {
      coll.push($(this).attr('data-cc'));
    });
    $("#fl").on("click", function() {
      coll = jQuery.grep(coll, function(value) {
        return value != 1;
      });
      console.log(coll);
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;p id="fl"&gt;
    &lt;img src="https://i.imgur.com/OHxsoJf.png" data-cc="1" class="zastavica" /&gt;
    &lt;img src="https://i.imgur.com/OHxsoJf.png" data-cc="2" class="zastavica" /&gt;
    &lt;img src="https://i.imgur.com/OHxsoJf.png" data-cc="3" class="zastavica" /&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>