Использование JQuery, чтобы добавить еще одно поле и обновить скрытое поле, только работая Один из способов

Question

JSFiddle ссылка: JSFiddle

Я создал сценарий, используя два примера я нашел, чтобы сделать две разные вещи, один добавить новые поля на пользователей запрос, а также обновить скрытое поле, чтобы показать, сколько было создано. Это работает, если вы добавляете поля, т. Е. Скрытое поле изменяется от 1 до 2 до 3 ... по мере появления дополнительных полей, но когда вы нажимаете «Удалить», это не масштабируется должным образом ниже 2, а не всегда.

Любые предложения о том, где я пошло не так:

HTML:

<input id="bacon" type="hidden" class="bacon" value="1" name="testinput"> 
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2> 

<div id="p_scents"> 
    <p> 
     <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label> 
    </p> 
</div> 

JQuery:

$(function() { 
     var scntDiv = $('#p_scents'); 
     var i = $('#p_scents p').size() + 1; 

     $('#addScnt').live('click', function() { 
       $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); 
       $('input#bacon').val(i); 
       i++; 
       return false; 

     }); 

     $('#remScnt').live('click', function() { 
       if(i > 2) { 
         $(this).parents('p').remove(); 
         $('input#bacon').val(i); 
         i--; 
       } 
       return false; 
     }); 
}); 

Answer 1

Во-первых, live() был устарел и удален из jQuery несколько лет назад, используйте on() с текущей версией jQuery.
size() также не должен использоваться, вы должны использовать length, а parents() не является хорошим выбором ... когда-либо.

Во-вторых, вы создаете элементы с одинаковым идентификатором несколько раз.

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

Попробуйте что-то более похожее на это, он использует более синтаксис jQuery'ish для создания элемента, который позволяет вам добавить обработчик событий для непосредственного удаления.

$(function() { 
 
    var scntDiv = $('#p_scents'); 
 

 
    $('#addScnt').on('click', function(e) { 
 
     e.preventDefault(); 
 

 
     var i = $('.scents').length + 1, 
 
      p = $('<p />', { 
 
       'class': 'scents' 
 
      }), 
 
      l = $('<label />', { 
 
       'for': 'p_scnts' + i 
 
      }), 
 
      f = $('<input />', { 
 
       type : 'text', 
 
       id : 'p_scnt' + i, 
 
       name : 'p_scnt' + i, 
 
       size : '20', 
 
       placeholder: "Input Value" 
 
      }), 
 
      a = $('<a />', { 
 
       href: "#", 
 
       text: 'Remove', 
 
       on: { 
 
        click: function() { 
 
         p.remove(); 
 
         $('#bacon').val($('.scents').length + 1); 
 
        } 
 
       } 
 
      }); 
 

 
     scntDiv.append(p.append(l.append(f), a)); 
 
     $('#bacon').val(i + 1); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="bacon" class="bacon" value="1" name="testinput"> 
 
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2> 
 

 
<div id="p_scents"> 
 
    <p> 
 
    <label for="p_scnts"> 
 
     <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /> 
 
    </label> 
 
    </p> 
 
</div>

Answer 2

$('#remScnt').live('click', function() { 
     if(i > 2) { 
     --i; 
       $(this).parents('p').remove(); 
       $('input#bacon').val(i); 

     } 
     return false; 
}); 

Answer 3

Вы должны увеличить/уменьшить я перед обновлением значения потому что в противном случае у вас все еще есть старое значение i, хранящееся на входе. И он будет обновляться только при следующем вызове функции. При обновлении я перед обновлением входа, вход обновляется в том, что вызов точной функции, а не в следующем И поэтому вы также не должны +1 при инициализации I

$(function() { 
    var scntDiv = $('#p_scents'); 
    var i = $('#p_scents p').size(); 

    $('#addScnt').on('click', function() { 
      $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); 
      i++; 
      $('input#bacon').val(i); 
      return false; 

    }); 

    $('#remScnt').on('click', function() { 
      if(i > 1) { 
        $(this).parents('p').remove(); 
        i--; 
        $('input#bacon').val(i); 
      } 
      return false; 
    }); 

});

Answer 4

Я обновил свой fiddle немного. Я:

1. Удалены я> 2
2. Redifined значение I (i-- и я ++) перед тем значение I была обновлена ​​во входных данных.
3. Удалено «+ 1» в первом определении i.

Некоторые пояснения: Если пользователь нажимает кнопку надстройку ввода, сценарий добавляет кнопку на страницу, добавляет 1 к значению I, и «хранится» значение в поле ввода.Таким образом, это выглядит примерно так:

$("form").append(/*new input*/); 
i++; 
$("input").val(i); 

Если пользователь удаляет вход, вход удаляется, я уменьшается на 1, а значение «хранится» на входе:

$("input").remove(); 
i--; 
$("input").val(i);