Modify this function to remove values if they're unchecked

Question

I'm using this function with an unordered list (<ul>) in order to replicate the functionality of a Select dropdown element. The function correctly shows the user's selected values in the designated container when they are checked, but it isn't removing them when an item is unchecked.

I've included the relevant snippet below, and posted a working example with the complete code here: http://jsfiddle.net/chayacooper/GS8dM/7/

JS

$(document).ready(function () {
     $(".dropdown_box").click(function () {
         $("#select_colors").show();
     });

     $(".dropdown_container ul li").click(function () {
         var text = $(this.children[0]).find("input").val();
         var currentHtml = $(".dropdown_box span").html();        
         $(".dropdown_box span").html(currentHtml.replace('Colors', ''));
         $(".dropdown_box span").append(', ' + text);              
     });
 });

HTML

<div class="dropdown_box"><span>Colors</span></div>
<div class="dropdown_container">
    <ul id="select_colors">
        <li><label><a href="#"><input type="checkbox" name="color[]" value="Black" />Black</a></label></li>
    </ul>
</div>

Answer 1

You should give the container id to the function. Then, before you add the text of the selection, you should make sure that it is not in the text. If it is, delete it.