javascript - 重新排序动态文本字段 ID

Question

我有动态文本字段，允许用户添加/删除该字段。一旦选定的字段被删除，文本字段ID将自动重新排序。到目前为止，这就是我所做的，但有时它会一起删除两行并出现重复的文本字段 ID。

 function hapus(i) {
     var $el = $("#field" + i);
     $el.nextAll('.fieldwrapper').each(function (idx, el) {
         $(el).find('[id]').addBack().attr('id', function () {
             return this.id.replace(/\d+$/, idx + i)
         }).filter('input[type="button"][onclick]').attr('onclick', 'hapus(' + (i + idx) + ')')
     })
     $el.remove();
 }

 $(document).ready(function () {
     $("body").on("click", "#addField", function () {

         var intId = $("#buildyourform div").length + 1;
         var fieldWrapper = $("<div id=\"field" + intId + "\" class=\"fieldwrapper\"/>");
         var hidden = $("<input type=\"hidden\" id=\"hiddenField_" + intId + "\" class=\"fieldname\"/>");
         var fpartNo = $("<input type=\"text\" id=\"partNumber_" + intId + "\" class=\"fieldname\"/>");
         var fDescription = $("<input type=\"text\" id=\"description_" + intId + "\" class=\"fieldname\" readonly />");
         var fPrice = $("<input type=\"text\" id=\"price_" + intId + "\" readonly class=\"fieldname\" style=\"width:80px\"/>");

         // remove textboxes and dropdown boxes
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" onclick=\"hapus("+intId+");\" />");
         removeButton.click(function () {
             $(this).parent().remove();
         });
         fieldWrapper.append(hidden);
         fieldWrapper.append(fpartNo);
         fieldWrapper.append(fDescription);
         fieldWrapper.append(fPrice);
         fieldWrapper.append(removeButton);
         $("#buildyourform").append(fieldWrapper);
         });
     });

此处演示:JSFiddle

Answer 1

 var count = 1;

 function hapus(i) {
     var $el = $("#field" + i);
     $el.nextAll('.fieldwrapper').each(function (idx, el) {
         $(el).find('[id]').addBack().attr('id', function () {
             return this.id.replace(/\d+$/, idx + i)
         }).find('input[type="button"][onclick]').attr('onclick', 'hapus(' + (i + idx) + ')')
     })
     $el.remove();
 }

 $(document).ready(function () {
     $("body").on("click", "#addField", function () {

         var intId = $("#buildyourform div").length + 1;
         var fieldWrapper = $("<div id=\"field" + intId + "\" class=\"fieldwrapper\"/>");
         var hidden = $("<input type=\"hidden\" id=\"hiddenField_" + intId + "\" class=\"fieldname\"/>");
         var fpartNo = $("<input type=\"text\" id=\"partNumber_" + intId + "\" class=\"fieldname\"/>");
         var fDescription = $("<input type=\"text\" id=\"description_" + intId + "\" class=\"fieldname\" readonly />");
         var fPrice = $("<input type=\"text\" id=\"price_" + intId + "\" readonly class=\"fieldname\" style=\"width:80px\"/>");

         // remove textboxes and dropdown boxes
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" onclick=\"hapus("+intId+");\" />");
         //removeButton.click(function () {
             //$(this).parent().remove();
         //});
         fieldWrapper.append(hidden);
         fieldWrapper.append(fpartNo);
         fieldWrapper.append(fDescription);
         fieldWrapper.append(fPrice);
         fieldWrapper.append(removeButton);
         $("#buildyourform").append(fieldWrapper);

         });
     });

我做了两个微小的改变。首先，将 hapus() 函数中的 filter 替换为 find。其次，删除removeButton.Click，它导致了您的删除问题。 fiddle :link