Question

我正在动态添加和删除文本框虽然我可以成功添加文本框，但是每次我必须重新加载浏览器以在单击删除按钮后删除文本框时，无法删除文本框。

这是我添加和删除文本框的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>

任何人都可以在其中出错，以便我无法在点击按钮时删除文本框吗？谢谢

Answer 1

使用.on，因为您希望将$("#removeButton").click(function () {绑定到动态添加的元素。它应该是

$("#removeButton").on("click", function () {
  //.....
});

Answer 2

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

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/

注意：考虑到我们在class名称末尾追加COUNTER值。如果课程给你任何风格，它将无法奏效。在这种情况下，您不应该使用类名作为目标属性，并考虑使用其他属性/属性标记新组，并在删除元素时定位此属性/属性。

Answer 3

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

Answer 4

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

动态删除文本框

4 个答案: