求助：如何使用jQuery 2.1.0实现输入框的动态增删及排序功能

嘿，我刚好做过类似的需求，给你一套用jQuery 2.1.0实现的完整方案，直接就能套用，一步步来哈：

1. 先搭好HTML基础结构 #

这里我们需要一个容器来装所有输入框组，每个组包含输入框、上下排序按钮和删除按钮，再加上一个添加新输入框的按钮：

<div class="input-container">
  <!-- 初始输入框组 -->
  <div class="input-group">
    <input type="text" placeholder="输入内容..." class="form-input">
    <button class="btn btn-up">↑</button>
    <button class="btn btn-down">↓</button>
    <button class="btn btn-delete">×</button>
  </div>
</div>
<button id="add-input">+ 添加新输入框</button>

2. 简单写点CSS让界面好看点 #

不用太复杂，只要让输入框组排版整齐，按钮样式统一就行：

.input-group {
  display: flex;
  align-items: center;
  margin: 10px 0;
  gap: 8px;
}

.form-input {
  padding: 6px 10px;
  flex: 1;
  min-width: 200px;
}

.btn {
  padding: 6px 10px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.btn-up, .btn-down {
  background-color: #e0e0e0;
}

.btn-delete {
  background-color: #ff6b6b;
  color: white;
}

#add-input {
  margin-top: 10px;
  background-color: #4ecdc4;
  color: white;
}

.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

3. jQuery核心逻辑实现 #

这部分是重点，我们要处理添加、删除、排序三个核心功能，注意因为是动态生成的元素，必须用事件委托来绑定事件：

$(document).ready(function() {
  // 1. 添加新输入框组
  $('#add-input').click(function() {
    // 克隆第一个输入框组，清空输入内容
    const newGroup = $('.input-group:first').clone();
    newGroup.find('.form-input').val('');
    $('.input-container').append(newGroup);
    // 更新排序按钮状态（比如最后一项不能下移）
    updateSortButtons();
  });

  // 2. 删除输入框组（事件委托，绑定到父容器）
  $('.input-container').on('click', '.btn-delete', function() {
    // 至少保留一个输入框组
    if ($('.input-group').length > 1) {
      $(this).closest('.input-group').remove();
      updateSortButtons();
    } else {
      alert('至少要保留一个输入框哦');
    }
  });

  // 3. 上移功能
  $('.input-container').on('click', '.btn-up', function() {
    const currentGroup = $(this).closest('.input-group');
    const prevGroup = currentGroup.prev('.input-group');
    if (prevGroup.length) {
      currentGroup.insertBefore(prevGroup);
      updateSortButtons();
    }
  });

  // 4. 下移功能
  $('.input-container').on('click', '.btn-down', function() {
    const currentGroup = $(this).closest('.input-group');
    const nextGroup = currentGroup.next('.input-group');
    if (nextGroup.length) {
      currentGroup.insertAfter(nextGroup);
      updateSortButtons();
    }
  });

  // 辅助函数：更新排序按钮的禁用状态（提升用户体验）
  function updateSortButtons() {
    $('.input-group').each(function(index) {
      const isFirst = index === 0;
      const isLast = index === $('.input-group').length - 1;
      $(this).find('.btn-up').prop('disabled', isFirst);
      $(this).find('.btn-down').prop('disabled', isLast);
      // 给禁用按钮加样式，让用户一眼识别
      $(this).find('.btn-up').toggleClass('disabled', isFirst);
      $(this).find('.btn-down').toggleClass('disabled', isLast);
    });
  }

  // 页面加载时初始化按钮状态
  updateSortButtons();
});

关键细节说明： #

• 事件委托：动态添加的输入框组初始不在DOM中，所以把事件绑定到已存在的.input-container上，确保新元素也能触发事件。
• 克隆复用：添加新输入框时直接克隆初始组，避免重复写HTML结构，效率更高。
• 按钮状态优化：通过辅助函数让第一个输入框的上移按钮、最后一个的下移按钮禁用，避免无效操作。
• 删除限制：设置至少保留一个输入框，你也可以根据需求去掉这个限制。

把这些代码整合起来，引入jQuery 2.1.0就能直接测试使用，完全满足你要的动态添加、删除与排序需求！

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