关于动态增删text box及图标切换功能的技术实现问询

一、HTML基础结构 #

用一个容器统一管理所有输入项，初始只渲染一个带「添加」按钮的输入组：

<div class="input-container">
  <div class="input-group">
    <input type="text" placeholder="输入内容">
    <button class="btn-icon icon-add">+</button>
  </div>
</div>

二、CSS样式调整 #

让输入框和按钮横向排列，通过样式区分添加/删除按钮的视觉差异：

.input-container {
  width: 300px;
}
.input-group {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.input-group input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.btn-icon {
  border: none;
  border-radius: 4px;
  width: 32px;
  cursor: pointer;
  color: #fff;
}
.icon-add {
  background-color: #4CAF50;
}
.icon-delete {
  background-color: #f44336;
}

三、JavaScript交互逻辑 #

通过事件委托处理动态元素的点击事件，实现添加/删除的核心交互：

const container = document.querySelector('.input-container');

container.addEventListener('click', (e) => {
  const targetBtn = e.target;
  const currentGroup = targetBtn.closest('.input-group');

  // 处理添加按钮点击
  if (targetBtn.classList.contains('icon-add')) {
    // 克隆当前输入组，重置输入框内容，保留添加按钮
    const newGroup = currentGroup.cloneNode(true);
    newGroup.querySelector('input').value = '';
    // 将新输入组插入到当前组下方
    currentGroup.after(newGroup);
    // 把当前按钮切换为删除按钮
    targetBtn.classList.remove('icon-add');
    targetBtn.classList.add('icon-delete');
    targetBtn.textContent = '-';
  }

  // 处理删除按钮点击
  if (targetBtn.classList.contains('icon-delete')) {
    // 确保至少保留一个输入组
    if (container.querySelectorAll('.input-group').length > 1) {
      currentGroup.remove();
      // 如果删除后只剩最后一个，把它的按钮换回添加
      const remainingGroups = container.querySelectorAll('.input-group');
      if (remainingGroups.length === 1) {
        const lastBtn = remainingGroups[0].querySelector('.btn-icon');
        lastBtn.classList.remove('icon-delete');
        lastBtn.classList.add('icon-add');
        lastBtn.textContent = '+';
      }
    }
  }
});

逻辑说明 #

1. 添加操作：点击添加按钮时，克隆当前输入组并插入到下方，同时将原按钮切换为删除样式
2. 删除操作：点击删除按钮时，移除当前输入组；如果删除后只剩最后一个输入框，自动将其按钮换回添加样式，保证始终有一个可添加的输入项

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