点击按钮动态生成带值及移除选项按钮问题（上限5个）

我来帮你搞定这个功能！你的原代码有几个逻辑和语法问题，导致没法实现动态生成按钮的需求，下面我会给出完整的修正方案，同时满足「最多生成5个按钮」和「带移除功能」的要求。

原代码的问题分析 #

• 语法错误：$("#added_value_1") = $(this).text(); 这种写法不符合jQuery的赋值规范，而且逻辑上也不是要修改已有按钮，而是要动态创建新的按钮组
• 缺少计数限制：没有追踪已生成的按钮数量，无法控制最多生成5个的上限
• 没有移除功能的实现：原代码里的移除按钮是静态的，没法对应动态生成的按钮

完整实现代码 #

HTML部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dynamic Button Generator</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="margin-top:20px;">
  <input type="text" name="myvaluefirst" id="myvaluefirst" class="form-control" placeholder="输入内容...">
  <button type="button" id="display_here" name="display_here" class="btn btn-primary mt-2">点击生成按钮</button>
  <!-- 用来存放动态生成的按钮组 -->
  <div id="button-container" class="mt-3"></div>
</div>
</body>
</html>

JavaScript部分

$(document).ready(function() {
  // 计数器：追踪已生成的按钮数量，上限是5
  let buttonCount = 0;
  const maxButtons = 5;
  const $mainButton = $('#display_here');
  const $input = $('#myvaluefirst');
  const $container = $('#button-container');

  // 实时更新主按钮的文本为输入框的值
  $input.on('input', function() {
    const inputVal = $(this).val() || '未输入内容';
    $mainButton.text(inputVal);
  });

  // 点击主按钮生成新的按钮组
  $mainButton.on('click', function() {
    if (buttonCount >= maxButtons) {
      alert('最多只能生成5个按钮哦！');
      return;
    }

    buttonCount++;
    const currentVal = $input.val() || '未输入内容';
    // 创建按钮组的HTML结构
    const buttonGroup = `
      <div class="btn-group mb-2" id="button-group-${buttonCount}">
        <button type="button" class="btn btn-success">${currentVal}</button>
        <button type="button" class="btn btn-danger remove-btn" data-group-id="button-group-${buttonCount}">移除</button>
      </div>
    `;
    // 添加到容器中
    $container.append(buttonGroup);
  });

  // 绑定移除按钮的点击事件（用事件委托处理动态生成的元素）
  $container.on('click', '.remove-btn', function() {
    const groupId = $(this).data('group-id');
    $(`#${groupId}`).remove();
    buttonCount--;
  });
});

代码说明 #

• 计数控制：用buttonCount变量追踪已生成的按钮组数量，每次点击主按钮前先判断是否达到上限maxButtons
• 动态生成：每次点击主按钮时，用模板字符串创建包含显示值按钮和移除按钮的组，添加到专门的容器中，每个组有唯一的ID方便移除
• 事件委托：因为移除按钮是动态生成的，所以用事件委托绑定点击事件，确保新生成的移除按钮也能正常工作
• 输入实时同步：输入框内容变化时，实时更新主按钮的文本，生成按钮时会取当前输入框的值（如果为空则显示「未输入内容」）

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