counting visible elements on click
<p>i have cart with some items already inside. on load, my script counts how many I have and display it in a div with a number.</p>

<p>each item has a remove button and when i remove an item, i expect my number to update, but it doesn't.</p>

<p>here's my fiddle: <a href="https://jsfiddle.net/vlrprbttst/99c8gn7k/7/" rel="nofollow">https://jsfiddle.net/vlrprbttst/99c8gn7k/7/</a></p>

<p>i have two questions:</p>

<p>1) i've intentionally put the function outside the document ready function so that i can reuse it. works fine onload using <code>countItems.init();</code> but doesn't work using it this way:</p>

<pre><code>  $(".remove-item").on("click",function(){
    $(this).closest("li").hide();
    countItems.init();
  });
</code></pre>

<p>why?</p>

<p>2) how do i make it perform the <code>countItems.init();</code> function again on click when I remove an item to refresh the number of <code>li</code> items?</p>