JavaScript动态添加div时无法添加奇数数量、上限5个的问题求解

AI 小北

2026-10-3

功能修复方案

核心问题根因

你代码无法添加奇数数量div的核心原因有2个：

克隆逻辑错误：$('.box').clone() 会选中当前页面所有的.box元素批量克隆，比如当前有2个.box时点击一次就会新增2个，数量会按1→2→4→8的规律翻倍，自然无法得到奇数
数量判断边界错误：初始页面已经存在1个.box，你要求最多5个的情况下，判断条件写<=5会允许加到6个才触发提示，不符合需求
另外你的代码还存在ID重复、删除逻辑不合理的问题，以下是完整修复方案：

修复后代码

JS代码

// 页面加载完成后缓存原始box模板，避免克隆已填充内容的元素
let originBoxTemplate;
$(document).ready(function() {
  originBoxTemplate = $('.box').first().clone();
  toggleRemoveBtn();
})

function addvv() {
  const currentBoxNum = $('div.box').length;
  // 最多5个，小于5时才允许新增
  if (currentBoxNum < 5) {
    // 仅克隆原始模板，每次只新增1个
    const newBox = originBoxTemplate.clone();
    // 清空新box输入框内容，替换重复ID避免DOM操作冲突
    newBox.find('input').val('');
    newBox.find('[id]').each(function() {
      $(this).attr('id', $(this).attr('id') + '_' + Date.now());
    })
    newBox.appendTo('.container');
    toggleRemoveBtn();
  } else {
    alert('only 5 can be added');
  }
}

function removediv() {
  // 每次删除最后一个box，如果你需要删除当前点击的对应box，可以替换为$(this).closest('.box').remove()
  $('.box').last().remove();
  toggleRemoveBtn();
}

// 统一控制删除按钮显隐，只剩1个box时隐藏删除按钮
function toggleRemoveBtn() {
  const currentBoxNum = $('div.box').length;
  if (currentBoxNum <= 1) {
    $('#removediv').hide();
  } else {
    $('#removediv').show();
  }
}