Question

I need to add and remove items from a list of integers. There will be no repeats in the list. I will pass the list to a query and display the results. Right now, I just need to be able to start with an empty list and as the user selects items, the list will be populated.

The idea is that when a user clicks on the first time, the item will be bolded and its ID will be added to the list. The second time an item is clicked on, the item will be unbolded and the ID will be removed from the list. Easy, right?

<script type="text/javascript">
$(document).ready(function() {

    MyList = "";

$(".Cat").live("click", function() {
    CurrentClass = $(this).attr("class");
    // CLICKED
        if (CurrentClass == "Cat") {
        $(this).addClass("Bold");
            NewItem = $(this).attr("id");
            // ADD ITEM TO LIST
            MyList = 
        // UNCLICKED 
        } else {
        $(this).removeClass("Bold");
            NewItem = $(this).attr("id");
            // REMOVE ITEM FROM LIST
            MyList =   
    }
});

});
</script>

<span id="1" class="Cat">1</span>

<span id="2" class="Cat">2</span>

<span id="3" class="Cat">3</span>

Answer 1

I’d us an array and keep it simple:

$(document).ready(function() {

    var MyList = new Array();

$(".Cat").live("click", function() {
    CurrentClass = $(this).attr("class");
    // CLICKED
        if (CurrentClass == "Cat") {
        $(this).addClass("Bold");
            NewItem = $(this).attr("id");
            // ADD ITEM TO LIST
            MyList.push(NewItem); 
        // UNCLICKED 
        } else {
        $(this).removeClass("Bold");
            NewItem = $(this).attr("id");
            // REMOVE ITEM FROM LIST
            MyList.splice( $.inArray(NewItem, MyList), 1 );  
    }
});

});

Once you have this array populated, displaying it as an actual comma-separated list is as simple as MyList.join(',')