Как сбросить все поля ввода, li и текстовой области, используя jquery

Question

У меня много элементов управления вводом, textarea и li, я хочу сбросить все из них, чтобы очистить их в случае первого значения li.

Я пытался использовать jquery:

    $(".classname").find("input:text").val("");

Это не работает для меня. Я также пытался:

    $(".classname input:text").val("");

тоже не работает, но без вызова val возвращает список элементов ввода.

HTML:

     <div id="bio" class="dlgpanel ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-2" role="tabpanel" aria-hidden="false" style="display: block;"><div style="float:left"><span class="fldlabel">First name:</span><br><span class="fldlabel">Surname:</span><br><span class="fldlabel">Gender:</span><br><span class="fldlabel">Date of Birth:</span><br><span class="fldlabel">Summary /<br>Foreword:</span><br></div><div style="float:left; margin-left: 4px;"><input type="text" id="vcFirstName" maxlength="24"><br><input type="text" id="vcSurName" maxlength="24"><br><select id="vcGender"><option value="Male">Male</option><option value="Female">Female</option></select><br><input type="text" id="dtDOB" class="is-datetimeEntry"><span class="datetimeEntry-control" style="display: inline-block; background: url('/scripts/jquery/dateentry/spinnerDefault.png') 0 0 no-repeat; width: 20px; height: 20px;"></span><span id="dtDOBtxt" style="display:none"></span><br><textarea rows="8" style="width:100%;" id="txtBioSummary"></textarea><br></div><div style="float:left; margin-left: 12px;"><span class="fldlabel">Enter the christian name for this person.</span><br><span class="fldlabel">Enter the family / birth name for this person.</span><br><span class="fldlabel">Is this person male or female?</span><br><span class="fldlabel">When was this person born DD/MM/YYYY ?</span><br><span class="fldlabel">An optional description / summary / forward about this individual.</span><br><p><button id="bioSave" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button"><span class="ui-button-text">Save</span></button></p></div>

Answer 1

Если вы используете форму, она будет сброшена, если вы добавите кнопку отдыха, в противном случае вы можете получить только текст ввода типа и очистить значение

function reset() {
  $(".classname").find("input[type='text']").val("");

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='classname'>
  <input type='text'>
  <input type='text'>
  <input type='text'>
  <input type='number' placeholder='add number but wont reset'>
</div>
<button onclick='reset()'>Reset</button>