2

I have a form that allows a user to add or remove input fields but they can only add a specific number (5), once that number is hit the "Add Row" button is hidden. There is also a remove row button that will remove a row but I am having trouble getting the button to show again if the amount of rows falls back under 5. The number of allowed rows will be added dynamically so that will change on different pages. I have a fiddle set up (https://jsfiddle.net/keygrip/hkqmp8zf/6/) and here is my code for the add/remove feature:

$('.add-row').click(function(){
    var sum = $('div.item').length;
    if(sum >= 5){
        $(this).hide();
    }
});

$('.remove-row').click(function(){
    var sum = $('div.item').length - 1;
    if(sum <= 4){
        $('.add-row').show();
    }
});

Any help is appreciated.

Jason
  • 85
  • 1
  • 9
  • 1
    Since the `.remove-row` buttons are being added dynamically, you need to use event delegation for the click handler. You did that correctly for the function the does the removal, but you also need to do that for the function that shows the Add Row button. – Barmar Sep 01 '16 at 16:40
  • Thanks, I got it working. I guess I didn't quite know what to search for. – Jason Sep 01 '16 at 17:15
  • 1
    Check this fiddle https://jsfiddle.net/pnmask4s/ – Omari Victor Omosa Sep 01 '16 at 17:43

0 Answers0