jQuery: Help re-activating button when limit is reduced

Question

Currently I have built this simple application where you can add input boxes using a button. Then when the limits reached it prevents you adding more and it has a maximum input box message displayed. You also have the option to remove the boxes you've just added. The problem I'm having is I don't know how to re-active the add button when the user has removed some of the input boxes. I'm pretty new to jQuery so if theres a better way of writing the code then I'm all ears. I have re-created my example in JSfiddle: http://jsfiddle.net/jTh3v/367/ .

The way I was looking to do it was when you clicked a remove button like such:

$("#remove").click(function(e){
  $("#MAX").hide('<p>MAX</p>');
});

Answer 1

Instead of this:

  $("#Input").on("click","#remove", function(e){
    e.preventDefault(); $(this).parent('div').remove(); x--;
  });

Try this:

  $("#Input").on("click","#remove", function(e){
    e.preventDefault(); 
    $(this).parent('div').remove(); 
    x--;
    $("#add").prop("disabled",false);
    $("#MAX").find('p').remove();
  });

Answer 2

Inside your

$("#Input").on("click","#remove", function(e){

In order to reenable the add button you need:

$("#add").prop("disabled",false);

To remove the MAX message you can:

$("#MAX p:first").remove();

The updated fiddle .

Here the snippet:

 $(document).ready(function() { var max_fields = 5; var x = 1; $("#add").click(function(e){ e.preventDefault(); if(x < max_fields){ x++; $("#Input").append( '<div><input type="text" name="mytext[]"/><a href="#" id="remove">Remove</a></div>' ); } else if(x == max_fields){ $("#MAX").append('<p>MAX</p>'); $(this).prop("disabled",true); } }); $("#Input").on("click","#remove", function(e){ e.preventDefault(); x--; $("#add").prop("disabled",false); $(this).parent('div').remove(); $("#MAX p:first").remove(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="add">Add</button><hr> <input type="text" name="mytext[]"> <div id="Input"></div> <div id="MAX"></div> 

Answer 3

In order to re-enable the add button, add $('#add').prop('disabled', false); to the remove click event handler.

Also, for the MAX display, I would recommend putting <p>Max</p> in the html, and setting the #MAX div to style="display:none;" , then using $('#MAX').show() and $('#MAX').hide() to display the MAX indicator. If you follow my instructions and add the above code to re-enable the add button, you'll see why:

1. The MAX indicator remains on the page after the button is re-enabled
2. Once you re-enable the add button, and then click it again until you reach the max number of fields for a second time, an additional <p>MAX</p> gets added to the div , creating duplicate indicators.

Answer 4

In the #remove click event handler

$("#Input").on("click", "#remove", function(e) {
    e.preventDefault(); $(this).parent('div').remove(); x--;
});

add the following line to update the disabled property of #add :

$('#add').prop('disabled', false);

Example:

$("#Input").on("click", "#remove", function(e) {
    e.preventDefault(); $(this).parent('div').remove(); x--;
    $('#add').prop('disabled', false);
    $('#MAX').hide();
});

Answer 5

There is a way

$("#Input").on("click","#remove", function(e){
    e.preventDefault(); 
    $(this).parent('div').remove(); x--;
    $('#MAX').html('');
    if( x===4 ){
        $('#add').prop('disabled', false);
    }
});

Its enabling Add button once, when you removed your fifth element.

Here is a jsfiddle

Answer 6

You have to check if the limit is greater than the number of input field when you delete one of them.

$(document).ready(function() {
  var max_fields = 5;
  var x = 1;

  $("#add").click(function(e){
    e.preventDefault();
    if(x < max_fields){
      x++;
      $("#Input").append(
        '<div><input type="text" name="mytext[]"/><a href="#" id="remove">Remove</a></div>'
      );
    }else if(x == max_fields){
        $("#MAX").append('<p>MAX</p>');
      $(this).prop("disabled",true);
    }
  });

  $("#Input").on("click","#remove", function(e){
    e.preventDefault(); $(this).parent('div').remove(); x--;

    if(x < max_fields){  //here you check if lower than limit
       $('#add').prop("disabled", false);
       $("#MAX").html(''); //deleting the content of max
    }

  });
});

Here is the jsfiddle example