title: How can add class "Active" on click of an li element and remove it from others at the same time?
body: <p>I am trying to create a menu in which I want to change the CSS of an li element on click while at the same time, CSS of other li's should remain the same. </p>
  
  <p>My menu is:  </p>
  
  <pre><code>    &lt;ul id="menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Parent 1&lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;item 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;non-link item&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Parent 2&lt;/a&gt; &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and my jquery to add CSS to the selected element is:</p>
  
  <pre><code> $("#menu li a").click(function() {
      $(this).parent().addClass('selected');
  
      });
  </code></pre>
  
  <p>However, right now, I am unable to remove the added CSS from a non-selected element. Is there anyway I can implement this?</p>