Блог

В настоящее время я создал это простое приложение, в котором вы можете добавлять поля ввода с помощью кнопки. Затем, когда лимиты достигнуты, это не позволяет вам добавлять больше, и отображается сообщение о максимальном поле ввода. У вас также есть возможность удалить только что добавленные поля. Проблема, с которой я сталкиваюсь, заключается в том, что я не знаю, как повторно активировать кнопку добавления, когда пользователь удалил некоторые поля ввода. Я довольно новичок в jQuery, поэтому, если есть лучший способ написания кода, я весь внимание. Я воссоздал свой пример в JSfiddle: http://jsfiddle.net/jTh3v/367 /.

Я хотел это сделать, когда вы нажали кнопку удаления, подобную такой:

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

Вместо этого:

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

Попробуйте это:

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

Внутри вашего

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

Для повторного включения кнопки добавления вам нужно:

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

Чтобы удалить МАКСИМАЛЬНОЕ сообщение, вы можете:

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

Обновленная скрипка.

Вот фрагмент:

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

Чтобы снова включить кнопку добавления, добавьте $('#add').prop('disabled', false); в обработчик click события удаления.

Кроме того, для максимального отображения я бы рекомендовал ввести <p>Max</p> html и установить #MAX div style="display:none;" равным, а затем использовать $('#MAX').show() и $('#MAX').hide() для отображения индикатора MAX. Если вы последуете моим инструкциям и добавите приведенный выше код для повторного включения кнопки добавления, вы поймете, почему:

1. Индикатор MAX остается на странице после повторного включения кнопки
2. Как только вы снова включите кнопку добавить, а затем нажимаете ее снова, пока не достигнете максимального количества полей во второй раз, <p>MAX</p> к ним добавляется дополнительное div , создавая повторяющиеся индикаторы.

Есть способ

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

Он включает кнопку добавления один раз, когда вы удалили свой пятый элемент.

Вот jsfiddle

Вы должны проверить, превышает ли лимит количество полей ввода при удалении одного из них.

 $(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
    }

  });
});
  

Вот пример jsfiddle

В обработчике #remove события щелчка

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

добавьте следующую строку, чтобы обновить disabled свойство #add :

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

Пример:

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