title: Jquery how to append and remove on a div click event
body: <p>I am new to using jquery and would like to know how to append and also remove the IDs from divs using the click event and appending to html. In the code below I have been able to append the IDs from clicking on a div, but am not sure how to remove. Whichever divs are highlighted yellow should be the ones that are appended. Clicking again on the div to remove the highlight should also remove the ID from the html. Thanks in advance for any help.</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;script type="text/javascript" src="jquery-1.3.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
    $('div.click').click(function() {
      var bg = $(this).css('backgroundColor');
      $(this).css({backgroundColor: bg == 'yellow' || bg == 'rgb(255, 204, 204)' ? 'transparent' : 'yellow'});
    });
  });
  $(function( ){
      $('#div1').bind('click', click);
      $('#div2').bind('click', click);
      $('#div3').bind('click', click);
  });
  function click(event){
      $('#p1').append(event.target.id + ",");
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="click" id="div1"&gt;click me&lt;/div&gt;
  &lt;div class="click" id="div2"&gt;click me&lt;/div&gt;
  &lt;div class="click" id="div3"&gt;click me&lt;/div&gt;
  &lt;p id="p1"&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>