递增计数以限制用户可以动态添加表单元素的次数

如何解决递增计数以限制用户可以动态添加表单元素的次数

我从一个jquery函数开始，并获得了帮助，然后对其进行了一些修改。我下面的代码有效。

HTML：

<a href="javascript:void(0);" class="add_project" title="Add project"><i data-feather="plus-circle"></i> Add another project</a>

JavaScript：

jQuery(function($) {
  const projectHTML = `<tr>
    <td>
      <select name="improvement_project[]" class="custom-select">
          <option selected>Select project</option>
        <optgroup label="Interior">
          <option>New Master/Owner's Suite</option>
          <option>Kitchen Upgrade</option>
       </select>
     </td>
  </tr>`;

  const $projects   = $("#projects");
  const $addProject = $('.add_project');
  const arrRow = () => $projects.append(projectHTML);

  $addProject.on("click",arrRow);
  ...
  });
});

单击“添加另一个项目”按钮会将projectHTML追加为另一个下拉菜单。我想做的是限制用户可以添加另一个下拉菜单的次数，例如5次。我已经在后端进行了限制，但是当然最好在UI上进行限制。

我设置了一个最大变量和计数器变量：

var maxprojects = 5;
var counter = 1;

，然后尝试在$addProject.on("click",arrRow);周围添加一些代码，例如：

if (counter < maxprojects) {
  $addProject.on("click",arrRow);
  counter++;
}

但这不会阻止点击添加超过5个项目。

请帮助我了解我到底要怎么做。

谢谢！

解决方法

简单的解决方案是在新项目行中添加一个类，并在添加另一个之前获取该类的长度

const projectHTML = `<tr class="project-row">....</tr>`;

const arrRow = () => {
  if($('tr.project-row').length < 5){
     $projects.append(projectHTML);
  }
};