title: remove type text from input field
body: <p>Note: I am new to Javascript.</p>
  
  <p>Here is code:</p>
  
  <p>it is from the html page itself</p>
  
  <pre><code>&lt;form action="#" id="ToolKeywordSearch"&gt;
    &lt;input type="text" class="ProductFinderText"
            id="ToolSearchField"onblur="if(this.value=='')    
               {this.value='Enter Search Term ';}" 
                  onclick="if (this.value == 'Enter Search Term ')
                    { this.value = ''; }" value="Enter Search Term " /&gt;
  &lt;/form&gt;
  
   ___________________________________
  |  _____________________     ______ |      (restriction does not let me insert image)
  | |                  |O |   |      ||
  | |enter search term | \|   |Search||                      
  |  ---------------------     ------ |
  |___________________________________|
  </code></pre>
  
  <p>Here what it does: when search button is pressed it opens the search field</p>
  
  <p>the search image is a background:</p>
  
  <pre><code>#ToolSearchField {
  
   background:url(../../Content/images/search_but.png) no-repeat scroll 
      right center   transparent;
  </code></pre>
  
  <p>cursor:pointer;
      }</p>
  
  <p>How to remove the text in the search field? with Javascript or CSS, tried both but it wasn't successful. </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var jo = document.getElementById("ToolSearchField").value;
      alert(jo);
  &lt;/script&gt;
  
  I receive Enter Search Term as an output. 
  
  Then if I insert remove(); instead, it doesn't do anything.
  
  var jo = document.getElementById("ToolSearchField").value;
      jo.remove();
  </code></pre>
  
  <p>The final result should have search button that launches the search action.</p>
  
  <p>Tell me please, what am I doing wrong.</p>