title: How can I add and remove an active class to an element in pure JavaScript
body: <p>I am trying to make a navigation menu I did all the <em>HTML</em> and <em>CSS</em> when come to <em>javascript</em> I am struck in the middle I am able to add a class to the element, but I am not able to remove the class remaining elements. Please help me with this.<br>
  here is my code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Navigation class Toggling&lt;/title&gt;
  
          &lt;style type="text/css"&gt;
          * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
          }
          header {
              width: 100%;
              height: auto;
              max-width: 600px;
              margin: 0 auto;
          }
          nav {
              width: 100%;
              height: 40px;
              background-color: cornflowerblue;
          }
          ul {
              list-style-type: none;
          }
          li {
              display: inline-block;
          }
          a {
              text-decoration: none;
              padding: 8px 15px;
              display: block;
              text-transform: capitalize;
              background-color: darkgray;
              color: #fff;
          }
          a.active {
              background-color: cornflowerblue;
          }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;header&gt;
          &lt;nav&gt;
              &lt;ul onclick="myFunction(event)"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;about&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;service&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;profile&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;portfolio&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
      &lt;script type="text/javascript"&gt;
          function myFunction(e) {
              e.target.className = "active";
          }
      &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>and here is my <a href="http://codepen.io/venumadhavdiv/pen/grEXpx" rel="noreferrer"><strong>Codepen</strong></a></p>