jquery - 删除后如何准确更新文本字段的属性？

Question

好的，这是尝试在删除时更新文本字段的名称属性。

(不了解 jquery/js)

这是一个 jsfiddle

目前，就脚本而言，名称的属性 os0 在用户添加文本字段时递增。

但是，假设您生成其中的 4 个，然后随机删除 Name 2，是的，名称标签会更新以反射(reflect)剩余的文本字段，但是文本字段的名称属性 os2 被删除，留下的数字不是连续的。它最终会成为 on0、on2 和 on3。

如何修复 jquery 的删除脚本部分，以便名称属性准确反射(reflect)删除？

Answer 1

这是一种方法。每次您删除输入字段时，它都会遍历剩余的输入字段，并使用 on + 索引号重新分配 name 属性。

编辑标签for-属性和输入id-属性现在也更新了

jQuery(document).ready(function($) {
  var maxFields = 10;
  $('.my-form .add-box').click(function() {
    var n = $('.text-box').length + 1;
    if (n > maxFields) {
      alert('Field limit reached');
      return;
    }
    var box_html = $('<p class="text-box"><label for="box' + n + '">Box <span class="box-number">' + n + '</span></label> <input type="text" name="on' + (n - 1) + '" value="" id="box' + n + '" /> <a href="#" class="remove-box">Remove</a></p>');
    box_html.hide();
    $('.my-form p.text-box:last').after(box_html);
    box_html.fadeIn('slow');

  });

  $('.my-form').on('click', '.remove-box', function() {
    $(this).parent().css('background-color', '#FF6C6C').fadeOut("slow", function() {
      $(this).remove();
      $('.text-box').each(function(index) {
        var label = $(this).children('label');
        label.attr('for', 'box' + (index + 1));
        label.children('.box-number').text(index + 1);
        $(this).children('input').attr({
          name: 'on' + index,
          id: 'box' + (index + 1)
        });
      });
    });
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-form">
  <form role="form" method="post">
    <p class="text-box">
      <label for="box1">Box <span class="box-number">1</span>
      </label>
      <input type="text" name="on0" value="" id="box1" />
      <a class="add-box" href="#">Add More</a>
    </p>
    <p>
      <input type="submit" value="Submit" />
    </p>
  </form>
</div>