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

Posted 2023-02-22

【中文标题】如何在删除时准确更新文本字段的属性？

【英文标题】：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 的删除脚本部分，以便名称属性准确反映删除？

【参考方案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>

【讨论】：

再次感谢您！我还有几个问题需要解决。今天晚些时候会发布。希望你能帮忙！

如果您愿意回答，还有一个问题：***.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

【讨论】：

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