如何一次性重置HTML动态生成表单字段？静态重置方法失效的解决办法

这个问题我之前帮不少开发者解决过——原生的$("#form")[0].reset()方法确实在动态表单里不好使，原因很简单：它只会把表单元素恢复到页面首次加载时的初始状态，而你动态添加的字段是后来才生成的，它们的“初始值”就是你创建时设置的值（哪怕是空，要是你创建时给了默认值，reset()也不会清空它）。

下面是两种最优且最简的实现方式，根据你习惯的写法选就行：

方法一：jQuery 实现（适配你之前的写法） #

直接遍历表单内所有表单控件，根据控件类型针对性清空：

$('#form').find('input, select, textarea').each(function() {
  switch(this.type) {
    // 文本类输入框直接清空值
    case 'text':
    case 'password':
    case 'email':
    case 'number':
    case 'tel':
    case 'url':
    case 'search':
      $(this).val('');
      break;
    // 单选/复选框取消选中
    case 'checkbox':
    case 'radio':
      this.checked = false;
      break;
    // 下拉选框清空选中状态（-1表示无选中项，若要默认选第一个空项可改为0）
    case 'select-one':
    case 'select-multiple':
      this.selectedIndex = -1;
      break;
    // 其他类型默认清空值
    default:
      $(this).val('');
  }
});

如果你的动态表单控件类型很单一（比如只有文本输入框），还能进一步简化：

$('#form').find('input[type="text"], textarea').val('');

方法二：原生 JS 实现（性能更优） #

如果不想依赖jQuery，用原生JS写也很简洁，效率还更高：

const form = document.getElementById('form');
const formElements = form.elements;

for (let i = 0; i < formElements.length; i++) {
  const elem = formElements[i];
  
  if (elem.type === 'checkbox' || elem.type === 'radio') {
    elem.checked = false;
  } else if (elem.tagName === 'SELECT') {
    elem.selectedIndex = -1;
  } else if (elem.type !== 'file') { // 文件输入框特殊处理
    elem.value = '';
  }
}

注意：文件输入框受浏览器安全限制，不能直接通过value=''清空，如果你需要处理这类控件，可以用替换元素的方式：

if (elem.type === 'file') {
  const newElem = elem.cloneNode(true);
  elem.parentNode.replaceChild(newElem, elem);
}

额外提示 #

如果你是用Vue、React这类框架生成的动态表单，最优方案其实是通过框架的状态管理来清空——比如重置绑定的表单数据对象，这样既符合框架的设计逻辑，也能避免手动操作DOM的麻烦。

内容的提问来源于stack exchange，提问作者user8765332