动态删除文本框

dynamically removing textbox

本文关键字：文本 删除 动态      更新时间：2023-09-26

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

这是我用于添加和删除文本框的 JavaScript。

<script type="text/javascript">
   $(document).ready(function(){
   var COUNTER = 3;
   var labelArray = ["answerswer", "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="answerswer_1"  id="answerswer_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="answerswer_2"  id="answerswer_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>

任何人都可以知道它有什么问题，以至于我无法在单击按钮时删除文本框？谢谢

您需要在此处修改 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/

注意：考虑到我们将 COUNTER 值附加到class名称的末尾。 如果类给你任何样式，它将不起作用。 在这种情况下，不应使用类名作为目标属性，而应考虑使用另一个属性/属性标记新组，并在删除元素时定位此属性/属性。

如果要将$("#removeButton").click(function () {绑定到

动态添加的元素，请使用.on。 它应该是 

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

$(document).ready(function(){
               var COUNTER = 3;
               var labelArray = ["answerswer", "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/

                  $("#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();
                    });
相关文章：