如何在删除时准确更新文本字段的属性？答案

【问题标题】：how to accurately update the text field's attribute upon removal?如何在删除时准确更新文本字段的属性？
【发布时间】：2015-11-21 11:48:53
【问题描述】：

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

(不懂jquery/js)

这是jsfiddle

目前，就脚本而言，名称的属性os0 会随着用户添加文本字段而增加。

但是，假设您生成其中 4 个，然后随机删除 Name 2，是的，名称标签会更新以反映左侧的文本字段，但文本字段的名称属性 os2 会被删除，并且数字剩下的不是顺序的。它将最终成为on0、on2 和on3。

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

【问题讨论】：

标签： jquery html paypal

【解决方案1】：

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

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

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>

【讨论】：

再次感谢您！我还有几个问题需要解决。今天晚些时候会发布。希望你能帮忙！
如果您愿意回答，还有一个问题：stackoverflow.com/questions/32257040/…
没问题，很高兴为您提供帮助。请告诉我。
嗯，由于我写问题的方式，它被迁移了。叹。另外，这次我自己做了修改，而不是问怎么做。无论如何，如果您想查看，请点击以下链接：codereview.stackexchange.com/questions/102127/…
我已经更新了我的帖子，如您在问题中提出的那样：)，如果您不想显示警报，只需删除该行但保留 return。

【解决方案2】：

我已经更新了删除小提琴中文本框的功能

$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
    $(this).nextAll().each(function(){
        $(this).find('input').attr('name','on'+(parseInt($(this).find('input').attr('name').split('on')[1])-1).toString());
    });
    $(this).remove();
    $('.box-number').each(function(index){
        $(this).text( index + 1 );
    });
});

See here

【讨论】：

感谢您抽出宝贵时间回复！欣赏它。