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

【问题标题】：Upon removal of text-boxes, how to renumber the rest of the text-boxes' names attribute?删除文本框后，如何重新编号文本框的其余名称属性？
【发布时间】：2016-01-15 17:37:09
【问题描述】：

粘贴在下面的代码在技术上有效，就像我编写的 jquery 代码在单击时有效。（不是 js/jquery 人）

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

但是，问题是这是贝宝的东西，如果您注意到每个输入（隐藏和未隐藏）都有编号。

    <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>

【问题讨论】：

你的后端语言是什么？如果您使用的是 PHP，那么您不需要增加名称，您可以将它们全部命名为 business[] 或 cmd[]，然后 PHP 将它们加载到正确排序的数组中，以便通过后端的索引访问。即，$_POST['cmd'][0] 将与其对应的 $_POST['display'][0] 对齐，依此类推。
@AndrewCoder，嗯。这里没有后端语言。正如你在这里看到的那样......只是希望使用jQuery来解决问题中提到的困境......如果我误解了你的问题，请告诉我。
哦，我明白了，您正在直接发布到贝宝服务器。您可能可以像我的第一条评论一样尝试它，看看贝宝如何通过测试来处理它。它可能工作得很好。我希望贝宝足够聪明，可以处理这样的数组形式。（不，你没有误解我的问题，我错过了贝宝部分）
@AndrewCoder，嗯......如果我知道 PHP......我会的......我不知道。另外.. 贝宝在我相当有限的经验中往往相当挑剔......所以......不确定你的建议是否可行，因为老实说，我花了很长时间才让这个工作。如此布置此表格的唯一原因是因为工作中的某个人希望允许人们能够自定义每个程序的捐款金额。如果人们对它不感兴趣，我想允许选择删除程序。
不用担心，我会尝试不带整数（字段name="name[]"），然后将一两个推入贝宝，看看购物车看起来是否正确。可以肯定的是，在它实际处理交易之前，您仍然会得到确认。

标签： jquery html paypal

【解决方案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

【讨论】：

@RickHitchcock，这行得通！谢谢！我正在网站上测试你的答案，直到我记得我必须将你的 jquery 包含在我忘记的 document.ready 中，它才起作用。无论如何，感谢您确定我所要求的确切目的。欣赏它。

【解决方案2】：

与此类似，但未经测试。概念可用。

$(document).ready(function() { 
    $(".removal").click(function() {
        $(this).remove();

         for(var i =0;i<$(".remove").length;i++)
    {
        var $inputs = $(this).children("input");

        $inputs.each(function(){

            var thisType = $(this).attr("type");

            switch(thisType){

                case "text":

                    $(this).attr("name", "name_" + i);
                    $(this).val(i + ".00");
                    break;
                case "hidden":
                     $(this).attr("name", "item_name_" + i);
                    $(this).val("Program " + i);
                    break;
            }            
        });

    }
    });

});

【讨论】：

我会使用这个概念，也许会在某些方面进行清理。基本上，一旦您删除了一个 .remove 项目，然后获取该类的所有剩余项目，并在循环中相应地重置属性“名称”和“值”。这会给你你想要的效果。我会在小提琴中尝试一下，如果有问题，我会调整它。
感谢您抽出宝贵时间回答我的问题。欣赏它。星期五快乐！
没问题。这是您要寻找的答案吗？如果是的话，你能标记一下吗？我试过了，但没有运行，所以我将代码更新为工作副本粘贴 sn-p。