Javascript 动态删除文本框

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

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

$（文档）.ready（函数（）{
var计数器=3；
var labelArray=[“答案”，“等级”]；
$（“#添加按钮”）。单击（函数（）{
对于（变量i=0；i

这是我的文本框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>

答复1:
排名1
答复2:
-
+
排名2

有人能告诉我它出了什么问题，以至于我无法在点击按钮时删除文本框吗？谢谢

如需绑定

$（“#removeButton”）。单击（函数（）{

）可动态添加元素。它应该是

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

---

您需要在此处修改两件事：

1-当添加新元素时，在末尾用当前计数器值标记它们的holding 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 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);
            };

更新：检查我更新的小提琴

<强>注：< /强>考虑到在<代码>类< /代码>名称的末尾追加计数器值。如果类给您任何样式，它将不起作用。在这种情况下，不应使用类名作为目标属性，并考虑使用另一个属性/属性标记新组，并在R时将此属性/属性作为目标。移除你的元素

                  $("#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 class="control-group'+COUNTER+'">';
            str += '<label class="control-label">' + label + " " + COUNTER + '</label>';
    ...
    ...

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

$（文档）.ready（函数（）{
var计数器=3；
var labelArray=[“答案”，“等级”]；
$（“#添加按钮”）。单击（函数（）{
对于（变量i=0；i

---

请更新脚本或检查此fiddle

而不是简单地粘贴代码，创建fiidle更好我发现了一个小错误，我正在考虑编辑该fiddle以使其正常工作，请稍候：）它必须同时删除“答案”和“排名”两个字段。它只删除了“排名”。我已更新了我的小提琴，请检查上面更新的答案。感谢您的回复，我仍然需要重新加载页面。请检查我更新的小提琴，您可能单击了旧的小提琴，我已在几分钟后更新了它。如果它不起作用，请告诉我什么不起作用在特定情况下不起作用的部件。

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

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