Javascript 如何在保持字段删除选项的同时使用 jQuery 循环变量从 2 开始

$(document).ready(function() {
  var i = 1;
  $('#add').click(function() {
    if (i <= 7) {
      $('#dynamic_field').append('<div class="add-row" id="row' + i + '"><label" for="number_' + i + '">Number ' + i + '</label><input type="text" name="number_' + i + '" value=""></div>')
      i++;
      $('.btn-remove').removeClass('hidden');
    }
  });
  $(document).on('click', '.btn-remove', function() {
    var button_id = $(this).attr("id");
    i--;
    $('#row' + $('#dynamic_field div').length).remove();
    if (i<=1) {
      $('.btn-remove').addClass('hidden');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="add" class="btn-add">Add Another Number</button>   <button type="button" class="btn-remove hidden">Remove last</button>
<div id="dynamic_field"></div>

jQuery($ => {
  let maxRows = 7;
  let rowTemplate = $('#row-template').html();
  let $container = $('#dynamic_field');

  $('#add').on('click', () => {
    let rowCount = $('.row').length;
    if (rowCount >= maxRows)
      return;
      
    let $row = $(rowTemplate).appendTo($container);
    $row.find('span').text(rowCount += 2);
    $('.btn-remove').removeClass('hidden');
  });
  
  $(document).on('click', '.btn-remove', () => $('.row:last').remove());
});

.hidden { 
  display: none;
} 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="add" class="btn-add">Add Another Number</button> 
<button type="button" class="btn-remove hidden">Remove last</button>
<div id="dynamic_field"></div>

<template id="row-template">
  <div class="row">
    <label>
      Number <span></span>
      <input type="text" name="number[]" value="" />
    </label>
  </div>
</template>

Javascript相关问答推荐

使脚本兼容于其他YouTube URL格式

使用reaction创建可排序的表不起作用

在JavaScript中逐一播放随机生成的音频文件数组

自定义帖子类型帖子未显示在网站上

将数据从strapi提取到next.js，但响应延迟API URL

传递一个大对象以在Express布局中呈现

判断表格单元格中是否存在文本框

当运行d3示例代码时，没有显示任何内容

从Node JS将对象数组中的数据插入Postgres表

简单的PayPal按钮集成导致404错误

保持物品顺序的可变大小物品分配到平衡组的算法

变量的值在Reaction组件中的Try-Catch语句之外丢失

使用领域Web SDK的Vite+Vue应用程序中的Web程序集(WASM)错误

将异步回调转换为异步生成器模式

Nextjs 13.4 Next-Auth 4.2登录(&Quot；凭据&，{})；不工作

为什么当我更新数据库时，我的所有组件都重新呈现？

expo 联系人：如果联系人的状态被拒绝，则请求访问联系人的权限

使用自动识别发出信号(&Q)

当我点击一个按钮后按回车键时，如何阻止它再次被点击

FindByIdAndUpdate在嵌套对象中创建_id