I try to reset children of testId, but it doesn't work.

<div id="testId">
 <input type="text" />
 <div>
 <input type="text" />
 </div>
 <select>
 <option>1</option><option>2</option>
 </select>
 </div>
<button onclick="myFunction()">reset</button>

All I tested:

$("#testId input").each(function() {      this.value = "";  })

$(document).ready(function() {  $('#testId').find('input:text').val('');});

document.getElementById('testId').reset()

 $('#testId')[0].reset();

$('#testId :input').val('');

$('#testId').trigger("reset");

$("#testId").get().reset();

CodePudding user response：

reset() is a method of form element, just change div to form

<form id="testId">
 <input type="text" />
 <div>
 <input type="text" />
 </div>
 <select>
 <option>1</option><option>2</option>
 </select>
 </form>
<button onclick="testId.reset()">reset</button>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

or reset elements manually

function resetDiv() {
  $('#testId input').val('');
  $('#testId select').val(1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="testId">
 <input type="text" />
 <div>
 <input type="text" />
 </div>
 <select>
 <option>1</option><option>2</option>
 </select>
 </div>
<button onclick="resetDiv()">reset</button>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>