如何实现动态新增input字段，点击时显示对应隐藏元素且带移除功能

实现思路 #

• 所有动态生成的input、隐藏元素、删除按钮统一包装为独立的组容器，用自定义属性做组内关联，避免ID重复冲突
• 采用事件委托机制绑定事件，不需要每次新增元素后重复绑定监听，性能更好也更易维护
• 输入字段触发点击/聚焦时，先全局隐藏所有组的关联元素，再单独显示当前组的关联元素，自动屏蔽其他组的隐藏内容
• 删除按钮直接绑定移除当前整组容器的逻辑，无需额外状态管理

完整可运行代码 #

HTML 结构 #

<div class="input-group-container">
  <button id="addInputBtn">新增输入字段</button>
  <div id="inputList"></div>
</div>

CSS 样式 #

/* 输入组基础样式 */
.input-item {
  margin: 15px 0;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}
/* 隐藏关联元素默认样式 */
.related-content {
  display: none;
  margin-top: 10px;
  padding: 8px;
  background: #f5f5f5;
  border-radius: 4px;
}
/* 激活状态下显示关联元素 */
.related-content.active {
  display: block;
}
/* 删除按钮样式 */
.remove-btn {
  margin-left: 10px;
  color: #ff4d4f;
  border: 1px solid #ff4d4f;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
}

JS 逻辑 #

const inputList = document.getElementById('inputList');
const addBtn = document.getElementById('addInputBtn');
let groupCount = 0;

// 新增输入组逻辑
addBtn.addEventListener('click', () => {
  groupCount++;
  const inputItem = document.createElement('div');
  inputItem.className = 'input-item';
  inputItem.innerHTML = `
    <input type="text" placeholder="输入字段${groupCount}" class="dynamic-input">
    <button class="remove-btn">移除</button>
    <div class="related-content">这是输入字段${groupCount}对应的隐藏内容</div>
  `;
  inputList.appendChild(inputItem);
});

// 事件委托处理动态元素的事件
inputList.addEventListener('click', (e) => {
  // 处理移除按钮点击
  if (e.target.classList.contains('remove-btn')) {
    e.target.closest('.input-item').remove();
    return;
  }
  // 处理输入字段点击
  if (e.target.classList.contains('dynamic-input')) {
    // 先隐藏所有关联内容
    document.querySelectorAll('.related-content').forEach(item => {
      item.classList.remove('active');
    });
    // 显示当前输入组对应的关联内容
    e.target.closest('.input-item').querySelector('.related-content').classList.add('active');
  }
});

功能验证说明 #

• 点击新增输入字段按钮可生成新的输入组，每组包含输入框、移除按钮、默认隐藏的关联内容
• 点击任意输入框，其他组的关联内容自动隐藏，仅当前组的关联内容显示
• 点击组内的移除按钮可直接删除当前整组元素

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