jQuery to Hide Individual Notifications
<p>I've been learning jQuery for a few weeks and have come across a task that I can't figure out.</p>

<p>I have been working on a clients admin control panel and have implemented notifications that appear at the top of the page used for various reasons.</p>

<p>What I have managed to do so far is make the div clickable to hide it:</p>

<pre><code>$(document).ready(function() {
  $('.click_hide').click(function() {
    $('.click_hide').slideUp('slow', function() {
    // Animation complete.
    });
  });
});

&lt;ul class="system_messages click_hide"&gt;
  &lt;li class="blue"&gt;&lt;span class="ico"&gt;&lt;/span&gt;&lt;strong class="system_title"&gt;There have been 17 new cases since your last login.&lt;/strong&gt;&lt;/li&gt;
  &lt;li class="blue"&gt;&lt;span class="ico"&gt;&lt;/span&gt;&lt;strong class="system_title"&gt;There have been 17 new cases since your last login.&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>What I would like to be able to do though is be able to hide notifications individually (<code>&lt;li class="click_hide"&gt;...&lt;/li&gt;</code>) and when there are none left the <code>&lt;ul&gt;...&lt;/ul&gt;</code> disappears to.</p>

<p>Thanks :)</p>
