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

使用.on你想绑定$("#removeButton").click(function () {到动态添加的元素。它应该是 

$("#removeButton").on("click", function () {
  //.....
});
于 2013-10-31T11:21:16.163 回答
1

你需要在这里修改两件事：

1- 在添加新元素时，在末尾用当前的 COUNTER 值标记它们的持有 div，这样以后就可以很容易地定位它们（​​就像下面的第 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/

注意：考虑到我们在名称末尾附加了 COUNTER 值class。如果课程给你任何风格，它就行不通。在这种情况下，您不应使用类名作为目标属性，并考虑使用另一个属性/属性标记新组，并在删除元素时以该属性/属性为目标。

于 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")显然不存在的元素。所以你需要做的是像这样修改你的创建新输入：

            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 回答