自定义问题表单中点击按钮增删输入框的实现疑问

这个需求在表单交互里挺常见的，我来给你一步步拆解实现方案，直接上可运行的代码示例，你可以直接套用或者按需修改。

1. 先搭好基础HTML结构 #

咱先把表单的核心结构写出来，包含标题输入、问题类型选择、选项容器和按钮：

<form id="customQuestionForm">
  <div>
    <label for="questionTitle">问题标题:</label>
    <input type="text" id="questionTitle" required>
  </div>
  
  <div>
    <label for="questionType">问题类型:</label>
    <select id="questionType" required>
      <option value="">请选择类型</option>
      <option value="text">单行文本</option>
      <option value="radio">单选按钮(Radio)</option>
      <option value="checkbox">复选框(Checkbox)</option>
      <option value="select">下拉菜单(Select)</option>
    </select>
  </div>

  <!-- 选项容器，默认隐藏 -->
  <div id="availableOptions" style="display: none; margin-top: 15px;">
    <h4>选项设置</h4>
    <!-- 默认的两个选项组 -->
    <div class="option-group">
      <input type="text" placeholder="输入选项值" required>
      <button type="button" class="remove-btn">移除</button>
    </div>
    <div class="option-group">
      <input type="text" placeholder="输入选项值" required>
      <button type="button" class="remove-btn">移除</button>
    </div>
    
    <button type="button" id="addOptionBtn" style="margin-top: 10px;">添加新选项</button>
  </div>

  <button type="submit" style="margin-top: 20px;">提交问题</button>
</form>

2. 简单的CSS美化 #

给元素加一点基础样式，让交互更直观：

.option-group {
  margin-bottom: 8px;
  display: flex;
  gap: 8px;
}

.remove-btn {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.remove-btn:hover {
  background-color: #c82333;
}

#addOptionBtn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

#addOptionBtn:hover {
  background-color: #0056b3;
}

3. 核心JavaScript逻辑 #

这部分是实现显示/隐藏选项容器、添加选项、移除选项的关键：

// 获取DOM元素
const questionTypeSelect = document.getElementById('questionType');
const availableOptions = document.getElementById('availableOptions');
const addOptionBtn = document.getElementById('addOptionBtn');

// 1. 根据问题类型显示/隐藏选项容器
questionTypeSelect.addEventListener('change', function() {
  const selectedType = this.value;
  // 当选中radio/checkbox/select时显示，否则隐藏
  if (['radio', 'checkbox', 'select'].includes(selectedType)) {
    availableOptions.style.display = 'block';
  } else {
    availableOptions.style.display = 'none';
  }
});

// 2. 添加新选项的逻辑
addOptionBtn.addEventListener('click', function() {
  // 创建一个新的选项组元素
  const newOptionGroup = document.createElement('div');
  newOptionGroup.className = 'option-group';
  newOptionGroup.innerHTML = `
    <input type="text" placeholder="输入选项值" required>
    <button type="button" class="remove-btn">移除</button>
  `;
  
  // 将新选项组添加到容器中
  availableOptions.insertBefore(newOptionGroup, addOptionBtn);
  
  // 给新的移除按钮绑定事件
  bindRemoveBtn(newOptionGroup.querySelector('.remove-btn'));
});

// 3. 绑定移除按钮的通用函数（复用逻辑）
function bindRemoveBtn(btn) {
  btn.addEventListener('click', function() {
    const optionGroup = this.parentElement;
    // 至少保留一个选项，避免用户删光所有选项
    if (document.querySelectorAll('.option-group').length > 1) {
      optionGroup.remove();
    } else {
      alert('至少需要保留一个选项哦');
    }
  });
}

// 给初始的移除按钮绑定事件
document.querySelectorAll('.remove-btn').forEach(bindRemoveBtn);

关键逻辑说明： #

• 显示/隐藏控制：监听下拉框的change事件，判断选中的类型是否属于需要选项的类型，动态切换容器的显示状态。
• 添加选项：点击添加按钮时，动态创建和初始选项组结构一致的元素，插入到添加按钮上方，同时给新的移除按钮绑定点击事件。
• 移除选项：封装了bindRemoveBtn函数来复用移除逻辑，同时加了判断——确保至少保留一个选项，避免出现没有选项的情况（你也可以根据需求去掉这个限制）。

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