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

user_18182645 0
Viewed 38

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 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>

increment loops variables jquery javascript
2 Answers

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 += 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>

user_5194130

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 class="add-row" 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" class="btn-add">Add Another Number</button> <button type="button" class="btn-remove hidden">Remove last</button>

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

Also You could CLONE an existing row

$(function() {
  const $container = $("#dynamic_field");
  const getCount = () => $container.find(".add-row").length;  
  $('.btn-remove').toggle(getCount() > 1);

  $('#add').click(function() {
    let count = getCount();
    if (count < 7) {
      const $cloneDiv =  $container.children().first().clone().appendTo($container);
      $cloneDiv.find("input").val("").attr("name",`number${count+1}`);
      $cloneDiv.find("label").text(`Number ${count+1}`);
    }
    $('.btn-remove').toggle(count > 0);
  });
  $(document).on('click', '.btn-remove', function() {
    $container.find(".add-row").last().remove();
    let count = getCount()
    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" class="btn-add">Add Another Number</button> <button type="button" class="btn-remove hidden">Remove last</button>

<div id="dynamic_field">
  <div class="add-row" id="1">
    <label for="number_1">Number 1</label><input type="text " name="number_1 " value="" />
  </div>
</div>

user_2957830
Related