Question

 var x = 0;
    var counter = 0 ;

    $(function () {
        $('#addBtn').click(function () {

                        x++;

                       if (counter < 5) {
                counter++;
                $('#content').append('<input type="text" id="mytxt' + x + '">');
                $('#content').append('<input type="button" id="removeBtn' + x + '" value="Remove" onclick="removeRow(' + x + ')" />');
                $('#content').append('<div id="br' + x + '"/></div>');



            } else {
                alert("you cannot added more than 5 element");
            }


        }
        );



    });




    function removeRow(index) {
        $('#mytxt' + index).remove();
        $('#removeBtn' + index).remove();
        $('#br' + index).remove();
        counter--;
           alert(counter);

    }

这是我创建动态按钮的功能，当我点击“addBtn”时，将创建新元素并且id以1开头，例如：mytxt1，当我再次点击“removeBtn”和“addBtn”时，id将会成为mytxt2，结果超出了我的预期，我想要的是当我点击“removeBtn”和“addBtn”时，id将再次从1开始，但不是2

新更新

这也是我的问题之一，如果我添加更多元素让4个元素，我得到的id将是mytxt1，mytxt2，mytxt3和mytxt4，如果我删除mytxt2，我添加的下一个元素将成为mytxt1， mytxt3，mytxt4和mytxt5，这不是我想要的，我想要的是mytxt1，mytxt2，mytxt3和mytxt4

Answer 1

难道没有Id的匹配吗？

我的代码尽可能地告诉我们：

#myTxt1 == #my1 
#removeBtn1 == #but1 
#br1 == #div1

Answer 2

尝试从代码中删除函数包装器

$(function () {  
// 
 });

Answer 3

以下（未经测试的）代码会跟踪已使用的索引，并允许重用以前与已删除项目关联的索引。请注意，用户可以按任何顺序删除项目;此代码首先重用较低的索引。

var maxElements = 5,
    indexes = [];

$(function () {
   $('#addBtn').click(function () {
      // look for a false or undefined index in the array
      // note: index numbers will start at 1 as in the question
      for (var x=1; x <= maxElements; x++) {
         if (!indexes[x]) {
            // found a currently unused index, so use it, and mark as used
            indexes[x] = true;

            $('#content').append('<input type="text" id="mytxt' + x + '">');
            $('#content').append('<input type="button" id="removeBtn' + x 
                        + '" value="Remove" onclick="removeRow(' + x + ')" />');
            $('#content').append('<div id="br' + x + '"/></div>');

            return;
         }
      }

      // no unused index was found
      alert("You cannot added more than " + maxElements + " elements.");
   });
});

function removeRow(index) {
   $('#removeBtn' + index).remove();
   $('#mytxt' + index).remove();
   $('#br' + index).remove();

   // mark index as not used
   indexes[index] = false;
}

编辑：注意，我保持这与我的起始代码类似，但我完全删除了counter变量，因为我的代码没有使用它 - 显然你可以把它放回去（用相应的{如果您想立即访问当前的元素数，请{1}}和counter++在适当的位置。

将动态元素添加到数组中

3 个答案: