1

テキストボックスを動的に追加および削除していますが、テキストボックスを正常に追加できますが、削除ボタンをクリックした後にブラウザをリロードしてテキストボックスを削除する必要があるたびに、削除ボタンをクリックしてもテキストボックスを削除できません。

これは、テキストボックスを追加および削除するための私の JavaScript です。

<script type="text/javascript">
   $(document).ready(function(){
   var COUNTER = 3;
   var labelArray = ["answer", "rank"];

   $("#addButton").click(function () {
       for(var i = 0; i < labelArray.length; i++){
        createNewInput(labelArray[i]);
    }
     COUNTER++;
    });


function createNewInput(label){
    var tbDiv = $('#TextBoxesGroup');
    var str = '<div class="control-group">';
    str += '<label class="control-label">' + label + " " + COUNTER + '</label>';
    str += '<div class="controls">';
    str += '<input type="text" id="' + label + '_' + COUNTER + '" name="'+ label +'_' + COUNTER + '" />';
    str += '</div>';
    str += '</div>';
    tbDiv.append(str);
};


  $("#removeButton").click(function () {
             if(COUNTER==3){
               alert("No more textbox to remove");
               return false;
           }   
               COUNTER--;
              $("#TextBoxesGroup" +COUNTER).remove();
        });
  });
  </script>

これがテキストボックスのhtmlです。 

<div id="TextBoxesGroup">
    <div class="control-group">
    <label class="control-label">answer_1: </label>
    <div class="controls"> 
        <input type="text"  name="answer_1"  id="answer_1" required="true" >
    </div>
    </div>

    <div class="control-group">
       <label class="control-label" for="rank1">Rank 1</label>
       <div class="controls">
      <input type="text" name="rank_1" id="rank_1" required="true">
    </div>
     </div>


    <div class="control-group">
    <label class="control-label">answer_2: </label>
    <div class="controls"> 
       <input type="text"  name="answer_2"  id="answer_2" required="true" >
        <button class="btn btn-mini btn-danger" data-toggle="button" type="button" id="removeButton">
                              -
        </button>
         <button class="btn btn-mini btn-success" data-toggle="button" type="button" id="addButton">
                               +
      </button>
    </div>
    </div>

    <div class="control-group">
             <label class="control-label" for="rank1" required="true">Rank 2</label>
              <div class="controls">
          <input type="text" name="rank_2" id="rank_2" required="true">
         </div>
       </div>
</div>

ボタンをクリックしてもテキストボックスを削除できないように、誰でも何が問題なのですか? ありがとう

4

4 に答える 4

1

ここで2つのことを変更する必要があります:

1- 新しい要素を追加するときは、保持している div を最後に現在の COUNTER 値でマークします。これにより、後でそれらを簡単にターゲットにすることができます (以下のステップ 2 のように)。

したがって、新しい要素を追加するには、次のようにする必要があります。

function createNewInput(label){
            var tbDiv = $('#TextBoxesGroup');
            var str = '<div class="control-group'+COUNTER+'">';
            str += '<label class="control-label">' + label + " " + COUNTER + '</label>';
    ...
    ...

これの代わりに：

function createNewInput(label){
                    var tbDiv = $('#TextBoxesGroup');
                    var str = '<div class="control-group">';
                    str += '<label class="control-label">' + label + " " + COUNTER + '</label>';

2- 要素を削除する場合、クラス名の末尾に現在の COUNTER 値がある要素を対象にします。このようにして、最後のグループを削除し、グループが 3 以下であるかどうかを確認します。削除は行われません。

$("#removeButton").click(function () {
                         if(COUNTER==3){
                           alert("No more textbox to remove");
                           return false;
                       }   
                   COUNTER--; 
                  $(".control-group"+COUNTER).remove();

                    });
              });

更新:更新されたフィドルを確認してくださいhttp://jsfiddle.net/qqqyC/1/

注:class名前の末尾に COUNTER 値を追加していることを考慮してください。クラスがスタイルを提供している場合、それは機能しません。この場合、クラス名をターゲット プロパティとして使用せず、別の属性/プロパティを使用して新しいグループをマークすることを検討し、要素を削除するときにこの属性/プロパティをターゲットにする必要があります。

于 2013-10-31T11:24:51.987 に答える
1 
$(document).ready(function(){
               var COUNTER = 3;
               var labelArray = ["answer", "rank"];

               $("#addButton").click(function () {
                   for(var i = 0; i < labelArray.length; i++){
                    createNewInput(labelArray[i]);
                }
                 COUNTER++;
                });


            function createNewInput(label){
                var tbDiv = $('#TextBoxesGroup');
                var str = '<div class="control-group">';
                str += '<label class="control-label">' + label + " " + COUNTER + '</label>';
                str += '<div class="controls">';
                str += '<input type="text" id="' + label + '_' + COUNTER + '" name="'+ label +'_' + COUNTER + '" />';
                str += '</div>';
                str += '</div>';
                tbDiv.append(str);
            };


              $("#removeButton").click(function () {

                         if(COUNTER==3){
                           alert("No more textbox to remove");
                           return false;
                       }   
                           COUNTER--;
               $("#answer_" +COUNTER).parent('div').parent('div').remove();
               $("#rank_" +COUNTER).parent('div').parent('div').remove();
                    });
              });

スクリプトを更新するか、このフィドルを確認してくださいhttp://jsfiddle.net/Cne2Q/

于 2013-10-31T11:33:29.760 に答える
0 
                  $("#removeButton").click(function () {
                         if(COUNTER==3){
                           alert("No more textbox to remove");
                           return false;
                       }   
                           COUNTER--;
                          $("#TextBoxesGroup" +COUNTER).remove();
                    });

ここで何をしているのか -$("#TextBoxesGroup1")明らかに存在しないような要素を削除しようとしています。したがって、次のように create new 入力を変更する必要があります。

            function createNewInput(label){
                var tbDiv = $('#TextBoxesGroup');
                var str = '<div id="textBoxContainer'+COUNTER+'" class="control-group">';
                str += '<label class="control-label">' + label + " " + COUNTER + '</label>';
                str += '<div class="controls">';
                str += '<input type="text" id="' + label + '_' + COUNTER + '" name="'+ label +'_' + COUNTER + '" />';
                str += '</div>';
                str += '</div>';
                tbDiv.append(str);
            };

そしてあなたの削除ボタン

                  $("#removeButton").click(function () {
                         if(COUNTER==3){
                           alert("No more textbox to remove");
                           return false;
                       }   
                           COUNTER--;
                          $("#textBoxContainer" +COUNTER).remove();
                    });
于 2013-10-31T11:30:29.430 に答える