唯一の方法

Question

JSFiddleリンクを作業、別のフィールドを追加するには、jQueryのを使用して更新隠しフィールド：私は私は2つの異なることを行うために発見した2つの例を使用してスクリプトを作成した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()は良い選択ではありません。

第2に、同じIDを持つ要素を複数回作成しています。

コレクションの長さを確認する必要があります。つまり、実際にページにある要素の数を確認し、新しい要素を挿入または削除するたびにその数を使用する必要があります。

このようなものを試してみましょう。これはもっとjQueryの構文を使用して要素を作成し、直接削除するイベントハンドラを追加することができます。

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

それ以外の場合は、入力の古い値がまだ格納されているからです。そして、関数の次の呼び出し時にのみ更新されます。 ）あなたが入力を更新する前に、私を更新すると、入力はその正確な関数呼び出しではなく、次の に更新されますそして私

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

}を初期化するときので、あなたにも+1を必要としません。

Answer 4

私はあなたのfiddle少しを更新しました。 I：

1. 削除さiの値を入力して更新されたi>の2
2. Redifined iの値（i--と私は++）前に。
3. iの最初の定義で「+ 1」を削除しました。

いくつかの説明： ユーザーがアドオン入力ボタンをクリックすると、スクリプトがページにボタンを追加するには、iの値に1を加算し、入力の値を「保存します」。だから、それは次のようになります。

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

、ユーザが入力を削除した場合、入力が削除され、iは1だけ減少させ、その値を入力して「保存」されています

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