title: remove only hidden class elements instead of all of them
body: <pre><code>.slidercard:nth-of-type(1){
      display:none;
  }
  .slidercard:nth-of-type(2){
      display:none;
  }
  </code></pre>
  
  <p><strong>js</strong>  </p>
  
  <pre><code>var b = $('.slidercard').length;
  console.log(b);  // result: 14 - that's ok
  
  $('.slidercard').each(function(){
       if ($(this).css("display") == "none") {
          $(this).remove();
      }
  });
  
  var b = $('.slidercard').length;
  console.log(b);  // result: 0
  </code></pre>
  
  <p>But result should be <code>12</code> because only two of <code>slidercard</code> are <code>display:none</code>.</p>
  
  <p>Also, on screen I see - all <code>.slidecard</code> are removed, instead of only two.</p>