Checking for empty element

[punk_runner]

I have a simple swatch picker to choose which colors I am going to allow for a specific garment for sale on my site. You click a colored div and it adds it to the list. If you click it again it removes it. If the string of colors is empty it adds the first color clicked. If the string is not empty it adds a comma and then the next color picked. But it is always adding the comma, so I end up with this:

 

,blue,green,red,purple

 

I don't want to go the ghetto route and trim the first character, I want to figure out why it isn't working. Obviously my string isn't evaluating to empty, and I am not sure how to do that in jQuery (I am an OOP PHP guy new to jQuery).... any help? I assume it is in this line:  if ($('#color_list').text == '')...  I have tried .text, .length and .html and cannot get it.

 

If there is a better way to do this whole thing I am all ears too.

 

<span id="color_list"></span>

<div id="blue" style="background-color:blue;"></div>
<div id="green" style="background-color:green;"></div>
<div id="purple" style="background-color:purple;"></div>
<div id="red" style="background-color:red;"></div>

<script>
      $("div").click(function () {

            // gets id of the div you clicked
            var color = $(this).attr('id');

            // gets the current value of the color_list div
            var colors  = $('#color_list').html();

            if ($('#color_list').text == '') {

                  // sets the string to the id of the clicked on div
                  var colorlist = $(this).attr('id');
            }
            else {

                  // checks to see if color is already in list, if it is then remove it
                  if (colors.indexOf(color) !== -1 ) {
                        var colorlist = colors;
                        colorlist = colorlist.replace(', ' + color, "");
                  }
                  else {

                        // color is not in the list, so add a comma and the color
                        var colorlist = colors + ', ' + $(this).attr('id');
                  }
            }

            $('#color_list').html(colorlist);

      });
</script>

 

 

If i try if (colors == '') it works except then i cannot remove the first color in the list when I click it again.

[Leftfield]

if(yourelement == null)

{

//logic here

}

else

{

//Not equal to Empty

}