title: How to hide all input elements within a form?
body: <p>I am trying to hide input elements within my form with the following code. But it is not working...</p>
  
  <pre><code>&lt;html lang="en"&gt;
     &lt;head&gt;
        &lt;title&gt;children demo&lt;/title&gt;
        &lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;h1&gt;Hello&lt;/h1&gt;
        &lt;div&gt;
           &lt;h1 class="selected"&gt;div-1&lt;/h1&gt;
           &lt;h1 class="selected"&gt;div-2&lt;/h1&gt;
        &lt;/div&gt;
        &lt;h1&gt;xyz&lt;/h1&gt;
        &lt;form name= "demo form"&gt;
        First name:&lt;input type="text" name="fname"&gt;&lt;br&gt;
        Last name: &lt;input type="text" name="lname"&gt;&lt;br&gt;
        &lt;input type="submit" value="submit"&gt;
        &lt;script&gt;
           $( "div" ).children( ".selected" ).css( "background-color", "yellow" );
           document.body.style.backgroundColor = "red";
           $( demo_form.elements ).hide();
        &lt;/script&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>