点击按钮克隆表单问题：克隆后表单保留原有数据

你当前使用clone(true)克隆表单行时，会完整复制元素的所有内容，包括表单控件（输入框、单选框、下拉框等）的当前值，所以克隆出的表单并非空表单。以下是两种可行的解决方法：

方案一：克隆后清空表单控件 #

克隆完成后，遍历克隆元素内的所有表单控件，清空它们的值并取消选中状态：

// 克隆最后一行表单
let clone = $("#nfa-transitions .production-row").last().clone(true);
// 清空所有表单控件的内容与选中状态
clone.find(':input').each(function() {
  const $this = $(this);
  switch(this.type) {
    case 'text':
    case 'password':
    case 'email':
    case 'number':
    case 'textarea':
      $this.val('');
      break;
    case 'checkbox':
    case 'radio':
      $this.prop('checked', false);
      break;
    case 'select-one':
    case 'select-multiple':
      $this.val('');
      break;
    default:
      break;
  }
});
// 将空表单添加到目标容器中
$("#nfa-transitions").append(clone);

如果不需要处理特殊控件，也可以用更简洁的写法覆盖大多数场景：

let clone = $("#nfa-transitions .production-row").last().clone(true);
clone.find(':input').val('').prop('checked', false).prop('selected', false);
$("#nfa-transitions").append(clone);

方案二：使用隐藏的空模板行 #

如果不想每次克隆后都手动清空数据，可以在页面中预先放置一个隐藏的空表单行作为模板，直接克隆这个模板即可：

<!-- 隐藏的空表单模板，不要填充业务数据 -->
<div class="production-row d-none">
  <!-- 这里是你的空表单结构 -->
  <input type="text" name="input1">
  <select name="select1">
    <option value="">请选择</option>
    <!-- 其他选项 -->
  </select>
  <!-- 其他表单控件 -->
</div>

// 克隆隐藏的模板并移除隐藏类
let clone = $(".production-row.d-none").clone(true).removeClass('d-none');
// 添加到目标容器
$("#nfa-transitions").append(clone);

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