title: jQuery on string click, add or remove text matched within textarea
body: <p>I have a list of word inside a <code>&lt;ul&gt;</code> tag, I'm trying to add the word from that li inside a textarea when user clicks on the <code>&lt;li&gt;</code> element. The word is added properly, but I'm trying to remove that word from the textarea if the user clicks on that same <code>&lt;li&gt;</code> element.</p>
  
  <pre><code>   &lt;ul&gt;
         &lt;li&gt;Word One&lt;/li&gt;
         &lt;li&gt;Word deux&lt;/li&gt;
         &lt;li&gt;Other Word three&lt;/li&gt;
         &lt;li&gt;yet another Word 4&lt;/li&gt;
     &lt;/ul&gt;
  
     &lt;textarea id="list" rows="4" cols="20"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>jQuery(document).ready(function() {
  
  // removing the textarea value when window is loaded again
  // otherwise for some reason all the values entered before are still there ?
  
  jQuery(window).load(function() {
      jQuery('#list').val('');  
  })
  
  jQuery('ul li').click(function(addWord) {
  
      var choice = jQuery.trim($(this).text());
      var textArea = jQuery("#list");
  
      // if the &lt;li&gt; with the word was allready clicked, then remove its "selected" class
      if (jQuery(this).hasClass('selected')) {
          jQuery(this).removeClass('selected');
  
          //textArea.replace(choice,'');
  
     } else {
         // add class selected to the clicked &lt;li&gt; word, add the word to the textarea
         jQuery(this).addClass('selected');
         textArea.val(textArea.val() + choice + ' , ').text(textArea.val());
     }
  });
  }
  </code></pre>