How can I use jQuery loop variable to start at 2 while maintaining field removal option?-CodePudding

I found this snippet to add additional fields to a form. Works great. If you may, please let me know how I can have the added fields start at 2 while also maintaining the option to remove it. While i = 2 does work, I have not figured out what's needed for the option to add/remove said fields accordingly. Thank you for your time.

$(document).ready(function() {
  var i = 1;
  $('#add').click(function() {
    if (i <= 7) {
      $('#dynamic_field').append('<div  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" >Add Another Number</button>   <button type="button" >Remove last</button>
<div id="dynamic_field"></div>

CodePudding user response：

You do not need to keep a count yourself

$(function() {
  const $container = $("#dynamic_field");
  let count = $container.children().length;
  $('.btn-remove').toggle(count > 1);

  $('#add').click(function() {
    let count = $container.children().length;
    if (count < 7) {
      $('#dynamic_field').append(`<div  id="row$(count)"><label" for="number_${count}">Number ${count 1}</label><input type="text" name="number_${count}" value=""></div>`);
      count  ;
    }
    $('.btn-remove').toggle(count > 0);
  });
  $(document).on('click', '.btn-remove', function() {
    const $children = $container.children();
    $children.last().remove();
    let count = $children.length;
    console.log(count)
    $(this).toggle(count > 1);
  });
});

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

<button type="button" id="add" >Add Another Number</button> <button type="button" >Remove last</button>

<div id="dynamic_field"></div>

CodePudding user response：

Your code is being made unnecessarily complicated by the use of id attributes which you generate at runtime.

You can completely avoid the need to do this by using the same content in each row, which you can store in a template element. Note that this template content uses no id, but the same class instead, and also that the label wraps the input so no for attribute is required.

You can then simply get the number of existing rows in the DOM to calculate the next number to display. Also, as the 'remove' button only targets the last row you can select it directly with .row:last.

Here's a working example with all these changes implemented:

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);
    $('.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" >Add Another Number</button> 
<button type="button" >Remove last</button>
<div id="dynamic_field"></div>

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