如何简化点击按钮动态新增输入框与按钮的硬编码？

嘿，我懂你现在的麻烦——手动一个个创建DOM元素不仅代码冗余，后期维护也头疼。这里有两个实用的方法能帮你简化add_reference函数，让代码更简洁易读：

方法1：使用模板字符串（Template Literals） #

直接把要创建的HTML结构以字符串形式写出来，通过innerHTML插入到容器中，代码量会大大减少，结构也一目了然：

function add_reference() {
  const newGroupHtml = `
    <div class="form-group row mb-1 new-reference">
      <div class="col-sm-3"></div>
      <div class="col-sm-9 input-group">
        <input type="text" class="form-control mr-2 reference-input">
        <div class="input-group-append">
          <button type="button" class="btn btn-block btn-ref btn-outline-info float-right">
            <i class="mdi mdi-plus-circle"></i>
          </button>
        </div>
      </div>
    </div>
  `;
  // 创建临时容器存放HTML，方便返回DOM元素
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = newGroupHtml.trim();
  return tempDiv.firstChild;
}

// 事件委托：绑定动态元素的点击事件（关键！否则新增按钮不会生效）
$(document).on('click', '.btn-ref', function() {
  $('.form-fieldset').append(add_reference());
});

// 初始按钮的点击事件
$('.btn-ref-first').click(function() {
  $('.form-fieldset').append(add_reference());
});

方法2：克隆现有元素 #

既然页面上已经有一个现成的输入组结构，直接克隆它再做少量修改，既能保证结构一致，又不用重复写HTML：

function add_reference() {
  // 克隆初始的输入组（true表示深克隆，复制子元素）
  const newGroup = $('.form-group.row.mb-1').first().clone(true);
  
  // 修改克隆后的元素：移除id、清空输入值、替换按钮类
  newGroup.removeClass().addClass('form-group row mb-1 new-reference');
  newGroup.find('label').remove(); // 移除标签，因为新增的不需要
  newGroup.find('input')
    .removeAttr('id name required')
    .val('')
    .removeClass('reference-input-first')
    .addClass('reference-input');
  newGroup.find('button')
    .removeClass('btn-ref-first')
    .addClass('btn-ref');
  
  return newGroup[0];
}

// 同样用事件委托处理动态按钮
$(document).on('click', '.btn-ref', function() {
  $('.form-fieldset').append(add_reference());
});

$('.btn-ref-first').click(function() {
  $('.form-fieldset').append(add_reference());
});

完整的HTML结构 #

<fieldset class="form-fieldset">
  <div class="form-group row mb-1">
    <label class="col-sm-3 text-left control-label col-form-label" for="reference">REF</label>
    <div class="col-sm-9 input-group">
      <input class="form-control mr-2 reference-input-first reference-input" id="reference" name="reference" required type="text" value="">
      <div class="input-group-append">
        <button type="button" class="btn btn-block btn-outline-info btn-ref-first float-right"><i class="mdi mdi-plus-circle"></i></button>
      </div>
    </div>
  </div>
</fieldset>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

注意点 #

• 事件委托：一定要用$(document).on('click', '.btn-ref', ...)这种方式绑定事件，因为动态添加的元素不会自动绑定初始的点击事件。
• 模板字符串的优势：结构直观，修改HTML时不用一个个调用createElement和setAttribute。
• 克隆的优势：能完美复用现有样式和结构，避免手动写HTML时出现结构不一致的问题。

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