如何高效实现点击+按钮生成输入框？避免重复代码的方案咨询

嘿，重复写代码改ID这种事儿谁都头疼！完全没必要这么干，咱们用动态生成DOM元素的思路就能彻底解决这个问题，不管你要加1个还是100个输入框，代码都只用写一次。下面给你两种常用的实现方式，都是业界常用的高效方案：

方法一：原生DOM API动态创建元素 #

这种方式最灵活，适合结构相对简单的输入组件，而且性能也不错。

第一步：基础HTML结构 #

先搭好容器和初始的输入框、按钮：

<div id="input-container">
  <!-- 初始的输入组 -->
  <div class="input-group">
    <input type="text" placeholder="请输入内容">
    <button class="remove-btn">-</button>
  </div>
</div>
<button id="add-btn">+</button>

第二步：简单美化（可选） #

加一点CSS让布局更舒服：

.input-group {
  margin: 10px 0;
  display: flex;
  gap: 6px;
}

input {
  padding: 4px 8px;
  flex: 1;
}

第三步：核心JavaScript逻辑 #

把创建输入组的逻辑封装成函数，点击+按钮就调用这个函数生成新的输入框：

// 获取核心元素
const inputContainer = document.getElementById('input-container');
const addBtn = document.getElementById('add-btn');

// 封装创建输入组的函数
function createInputGroup() {
  // 创建输入组容器
  const group = document.createElement('div');
  group.classList.add('input-group');

  // 创建输入框
  const input = document.createElement('input');
  input.type = 'text';
  input.placeholder = '请输入内容';

  // 创建删除按钮
  const removeBtn = document.createElement('button');
  removeBtn.classList.add('remove-btn');
  removeBtn.textContent = '-';

  // 给删除按钮绑定事件
  removeBtn.addEventListener('click', () => {
    group.remove(); // 点击就删除当前输入组
  });

  // 组装元素
  group.appendChild(input);
  group.appendChild(removeBtn);

  return group;
}

// 给+按钮绑定添加事件
addBtn.addEventListener('click', () => {
  const newInputGroup = createInputGroup();
  inputContainer.appendChild(newInputGroup);
});

// 给初始的删除按钮绑定事件
document.querySelectorAll('.remove-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    btn.parentElement.remove();
  });
});

方法二：模板字符串生成复杂结构 #

如果你的输入组结构比较复杂（比如包含多个输入框、下拉选单等），用模板字符串会更直观，写起来更顺手：

function createInputGroup() {
  // 用模板字符串定义输入组的HTML结构
  const groupHTML = `
    <div class="input-group">
      <input type="text" placeholder="请输入内容">
      <button class="remove-btn">-</button>
    </div>
  `;

  // 把模板字符串转换成DOM元素
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = groupHTML;
  const group = tempDiv.firstElementChild;

  // 绑定删除事件
  group.querySelector('.remove-btn').addEventListener('click', () => {
    group.remove();
  });

  return group;
}

// 剩下的按钮绑定逻辑和方法一完全一样

为什么这两种方法更好？ #

• 零重复代码：不管要生成多少个输入框，都只需要维护一份创建逻辑
• 避免ID冲突：用类名代替硬编码的ID，再也不用纠结id="input1"、id="input2"这种问题
• 易维护：如果要修改输入框的样式、属性或者结构，只需要修改createInputGroup函数就行，不用挨个改重复的代码
• 扩展性强：后续要加删除、验证等功能，直接在函数里加逻辑就行

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