title: How do I clear the text of a text control dynamically?
body: <p>I have a table of rows and each row has an edit button. When I click the button I can set row values to form controls on a form. </p>
  
  <p>I'm expecting that when I call <code>$('#txtFirstName').empty()</code> it should clear the text in <code>txtFirstName</code>. Instead, the text is not cleared, and when I call the form again it shows the old text in that control. </p>
  
  <p>Is there a way to clear text in the control?</p>
  
  <pre><code>$('#btnClear').click(function () {
      $('#txtFirstName').empty();
      $('#txtLastName').empty();
  }
  </code></pre>
  
  <p>The source code shows as data was cleared. </p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;
          &lt;label for="employee_FirstName"&gt;First Name&lt;/label&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;input class="form-control" data-val="true" data-val-required="The First Name field is required." id="txtFirstName" name="employee.FirstName" placeholder="First Name" style="width:400px" type="text" value="" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;span class="field-validation-valid" data-valmsg-for="employee.FirstName" data-valmsg-replace="true"&gt;&lt;/span&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;
          &lt;label for="employee_LastName"&gt;Last Name&lt;/label&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;input class="form-control" data-val="true" data-val-required="The Last Name field is required." id="txtLastName" name="employee.LastName" placeholder="Last Name" style="width:400px" type="text" value="" /&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;span class="field-validation-valid" data-valmsg-for="employee.LastName" data-valmsg-replace="true"&gt;&lt;/span&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>This information might be coming from the cache, but I'm not sure.</p>