title: How to make in javascript that <a> element disappear after you click on link?
body: <p>I have this code, when user clicks on Show Comments, div with comments appears. Problem is that Show Comments stays diplayed after you click on it.</p>
  
  <pre><code>&lt;html&gt;
      ..
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;
  ...
      &lt;body&gt;
      ...
      &lt;div class='comments-container' style='display: none;'&gt;
  comment 1: ...   
  comment 2: ...
  &lt;/div&gt;
      &lt;a class='show-comments'&gt;Show Comments&lt;/a&gt;
      ...
      &lt;script&gt;
      $(".show-comments").click(function(){
      $(".comments-container").slideDown("slow");
      });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How to make in javascript that  element disappear after you click on link? Something like this:</p>
  
  <pre><code>&lt;a class='show-comments' style='display: none;'&gt;Show Comments&lt;/a&gt;
  </code></pre>
  
  <p>Or even better, how to make that Show Comments change to Hide Comments and when you click on Hide Comments, comments are hidden (div with comments is set again to dispay: none), and Show Comments appears again.
  Maybe that could be created easier with two  elements: </p>
  
  <pre><code>&lt;a class='show-comments'&gt;Show Comments&lt;/a&gt;
  &lt;a class='hide-comments' style='display: none;'&gt;Hide Comments&lt;/a&gt;
  </code></pre>
  
  <p>that changes to</p>
  
  <pre><code>&lt;a class='show-comments' style='display: none;'&gt;Show Comments&lt;/a&gt;
  &lt;a class='hide-comments'&gt;Hide Comments&lt;/a&gt; 
  </code></pre>
  
  <p>If there is a better way to do this with other language than javascript, please feel free to write it.</p>