title: jQuery: Add and Remove images
body: <p>I am new to jQuery.
  I have 2 panels: If i click on an image in the left panel, then this image will appear in the right panel. I do it with clone(), so far i am here. Now i would like to have the image in the right panel be removed, when i click on it. And the count of summary weight (from img id) will depend on if i add or remove the images from the right panel. Can someone please help me.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;test&lt;/title&gt;
  &lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script type="text/javascript" src="script/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
  #output, #selectList { 
        width: 202px; 
        border: 1px solid #000; 
        margin: 2px; 
        height: 400px; 
        float: left 
   }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  summary weight: &lt;div id="sumcount"&gt;&lt;/div&gt;kg&lt;br /&gt;
  &lt;div id="selectList"&gt;
      &lt;img id="34" src="http://placekitten.com/80/80" /&gt;
      &lt;img id="21" src="http://placekitten.com/81/81" /&gt;
      &lt;img id="11" src="http://placekitten.com/g/80/80" /&gt;
      &lt;img id="5" src="http://placekitten.com/g/81/81" /&gt;
      &lt;img id="9" src="http://placekitten.com/g/82/82" /&gt;
  &lt;/div&gt;
  &lt;div id="output"&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  $(function(){
      var output = $('#output');
      //$('#selectList img').each(function(i, el){
      //        $(this).addClass('img' + i);
      //    });
      $('#selectList img').click(function(){
          output.append($(this).clone());
      });
      // dont work
      $('#output img').click(function(){
          output.remove($(this));
      });
  
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Demo:</strong> <a href="http://jsfiddle.net/XLSmU/" rel="nofollow">http://jsfiddle.net/XLSmU/</a></p>