How To Clear Table Data If It's Hide

I have some tables which will show depending on radio button. If radio button value is 'YES' then show the table if 'No' then hide. I got the solution how to do that. Now I want to

Solution 1:

If you mean by clearing out the table to remove all rows, then you can use table.html(''); where table is assigned $(this).closest('.form-group').next('table'). If you mean to just clear out the input fields, the easiest way to do that is to enclose your fields in a <form> and to do a form reset.

See (and run) the code snippet below:

$(document).ready(function() {
  $('.form-check-inline input[type="radio"]').on('change', function() {
    let table = $(this).closest('.form-group').next('table');
    if (this.value === 'No') {
      $('#f').trigger('reset');
      table.hide();
    }
    else {
      table.show();
    }
  });
});

.show-dc-table {
  display: none;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><formid="f"><divclass="form-group row"><labelclass="col-sm-2 col-form-label">Do you have allergies?</label><divclass="col-sm-10"><divclass="form-check form-check-inline"><inputclass="form-check-input"type="radio"name="allergy"value="Yes"><labelclass="form-check-label">Yes</label></div><divclass="form-check form-check-inline"><inputclass="form-check-input"type="radio"name="allergy"value="No"><labelclass="form-check-label">No</label></div></div></div><tableclass="table table-striped show-dc-table"><thead><tr><thscope="col">Alergic Reactions to</th><thscope="col">Yes</th><thscope="col">No</th><thscope="col">Notes</th></tr></thead><tbody><tr><td>Aspirin, Ibuprofen, Codeine</td><td><inputtype="radio"name="a1" /></td><td><inputtype="radio"name="a2" /></td><td><inputtype="text" /></td></tr></tbody></table></form>