jquery - 删除文本框后，如何重新编号其余文本框的名称属性？

Question

从技术上讲，粘贴在下面的代码在某种意义上是有效的，就像我编写的 jquery 代码在单击时有效一样。 (不是 js/jquery 的人)

这是一个 jsfiddle:http://jsfiddle.net/t2t1mxqd/

但是，问题在于这是 paypal 的东西，如果您注意到每个输入(隐藏和未隐藏)都有编号。

    <div class="removal">
        <input type="hidden" name="item_name_1" value="Program 1">Program 1
        <input class="removal" type="text" name="amount_1" value="10.00">
        <button type="button">Remove</button> 
    </div>

比如以第一个为例:隐藏行有item_name_1，非隐藏行有amount_1。

如果它是自下而上删除的，这不是问题，即数字保持从上到下的顺序编号。

如果它们是随机删除或自上而下删除，这是一个问题。

那么数字显然不是从item_name_1等开始的

我如何重写代码，当一个人选择说，删除程序 5 时，item_name_n 和 name_n 的其余属性按顺序重写，还是仍然有效？

有什么建议吗？

谢谢。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script>
    $(document).ready(function() { 
        $(".removal").click(function() {
            $(this).remove();
        });
}); 
</script> 

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr"
        method="post">

    <!-- Identify your business so that you can collect the payments. -->
    <input type="hidden" name="business" value="kin@kinskards.com">

    <!-- Specify an Add to Cart button. -->
    <input type="hidden" name="cmd" value="_cart">
    <input type="hidden" name="upload" value="1">

    <!-- Specify details about the item that buyers will purchase. -->
    <input type="hidden" name="item_name"
        value="Donations to Programs">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="no_note" value="0">

    <input type="hidden" name="no_shipping" value="2">

    <div class="removal">
        <input type="hidden" name="item_name_1" value="Program 1">Program 1
        <input class="removal" type="text" name="amount_1" value="10.00">
        <button type="button">Remove</button> 
    </div>

    <br /><br />

    <div class="removal">
        <input type="hidden" name="item_name_2" value="Program 2">Program 2
        <input  type="text" name="amount_2" value="10.00">
             <button type="button">Remove</button> 
    </div>
    <br /><br />

    <div class="removal">
        <input type="hidden" name="item_name_3" value="Program 3">Program 3
        <input type="text" name="amount_3" value="10.00">
        <button type="button">Remove</button> 
    </div>

    <br /><br />

    <div class="removal">
        <input type="hidden" name="item_name_4" value="Program 4">Program 4
        <input type="text" name="amount_4" value="10.00">
        <button type="button">Remove</button>
    </div>

    <br /><br />

    <div class="removal">
        <input  type="hidden" name="item_name_5" value="Program 5">Program 5
        <input  type="text" name="amount_5" value="10.00">
        <button type="button">Remove</button> 
    </div>

    <br /><br />

    <div class="removal">
           <input  type="hidden" name="item_name_6" value="Program 6">Program 6
        <input  type="text" name="amount_6" value="10.00">
        <button type="button">Remove</button>  
    </div>

    <br /><br />

    <div class="removal">
        <input type="hidden" name="item_name_7" value="Program 7">Program 7
        <input  type="text" name="amount_7" value="10.00">
        <button type="button">Remove</button> 
    </div>

        <br /><br />

    <div class="removal">
        <input type="hidden" name="item_name_8" value="Program 8">Program 8
        <input  type="text" name="amount_8" value="10.00">
        <button type="button">Remove</button> 
    </div>
        <br /><br />

    <div class="removal">
        <input type="hidden" name="item_name_9" value="Program 9">Program 9
        <input type="text" name="amount_9" value="10.00">
        <button type="button">Remove</button> 
    </div>

    <br /><br />

    <div class="removal">
        <input type="hidden" name="item_name_10" value="Program 10">Program 10
        <input type="text" name="amount_10" value="10.00">
        <button type="button">Remove</button> 
    </div>

    <br /><br />

    <div class="removal">
        <input type="hidden" name="item_name_11" value="Program 11">Program 11
        <input  type="text" name="amount_11" value="10.00">
         <button type="button">Remove</button> 
    </div>


    <br /><br />

    <!-- Display the payment button. -->
    <input type="image" name="submit" border="0"
        src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif"
        alt="PayPal - The safer, easier way to pay online">
    <img alt="" border="0" width="1" height="1"
        src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" >
</form>


<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr"
        method="post">

<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="kin@kinskards.com">

<!-- Specify a PayPal Shopping Cart View Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="display" value="1">


<br /><br />
<!-- Display the View Cart button. -->
<input type="image" name="submit" border="0"
        src="https://www.paypalobjects.com/en_US/i/btn/btn_viewcart_LG.gif"
       alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1"
        src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" >
</form>

Answer 1

这将使 input 名称保持顺序，而不影响任何其他内容，我认为这是您的目标:

$('.removal button').click(function() {
  $(this).parent().remove();

  $('.removal [type="hidden"]').each(function(idx) {
    $(this).attr('name', 'item_name_'+(idx+1));
  });

  $('.removal [type="text"]').each(function(idx) {
    $(this).attr('name', 'amount_'+(idx+1));
  });
});

您还可以通过删除以下代码来稍微清理一下代码:

<br /><br />

... 并为 removal 类添加底部边距:

.removal {
  margin-bottom: 1em;
}

这样，您在删除行时就不会以空格结束。

Fiddle