Javascript 删除中间输入后，对数据id重新编号

现在，当你添加输入时，它们的编号是1乘1，所以假设我们添加5个冠军，它们的编号如下

• 一,
• 二,
• 三,
• 四,
• 五,

假设我们要删除第三个，它看起来像

• 一,
• 二,
• 四,
• 五,

我希望我在移除后被编号，比如

• 一,
• 二,
• 三,
• 四,

这是一个正在工作的

守则最重要的部分：

$(document).ready(function(){
    championNumberArray = 0;
    championNumber = 1;
    $('a#AddChampion').on('click',function(){
        $('div#ChampionInput').append(
        '<div class="Champion" data-id="'+championNumberArray+'">\
             <a href="#" class="Remove">Remove</a>\
             <br>\
             <input type="text" class="ChampionInput" list="champions" name="champion[]" placeholder="Champion '+championNumber+'">\
             <datalist id="champions"></datalist>\
             <a href="#" class="AddSpell">Add Spell</a>\
             <a href="#" class="AddGeneralChange">Add General Change</a>\
             <div class="GeneralChanges">\
             </div>\
             <div class="SpellChanges">\
             </div>\
             <br>\
         <div>');
        for(var key in champions){
            if(champions.hasOwnProperty(key)){
                $('#champions').append('<option value="' + key + '">');
            }
        }
        championNumberArray++;
        championNumber++;
    });
});

$（文档）.ready（函数（）{
championNumberArray=0；
championNumber=1；
$（'a#AddChampion'）。在（'click'，function（）上{
$（'div#championput'）。追加(
'\
\

\
\
\
\
\
\
\
\
\

\
');
for（var密钥在冠军中）{
if（champions.hasOwnProperty（键））{
$（“#冠军”）。追加（“”）；
}
}
championNumberArray++；
championNumber++；
});
});

和索引

<div id="wrap">
    <a href="#" id="AddChampion">Add Champion</a>
    <form name="second_form" id="second_form" method="POST">
        <div id="ChampionInput">
        </div>
        <br><br>
        <input type="submit" name="submit">
    </form>
</div>

删除输入时，必须对输入重新编号。试试下面的方法

$('div#ChampionInput').on('click', 'a.Remove',function(){
    var champion = $(this).closest('.Champion');
    var id = champion.data("id");
    var nextChampion = champion;

    //
    // Loop through each following champion
    while((nextChampion = nextChampion.next()).length != 0){
        // Update id
        nextChampion.attr("data-id",id++)

        // Update placeholder
        // Placeholder is id + 1 because placholders start at 1 and ids start at 0
        nextChampion.find(".ChampionInput").attr("placeholder","Champion " + (id + 1));        
    }

    // Remove champion
    champion.remove();

});

---

顺便说一下，您不需要将标记名放在选择器之前。特别是对于ID，每个页面都应该是唯一的

#championput

与

div#championput

完全相同，只是

#championput

更快，因为浏览器不必检查标记名是否匹配。

删除一个标记名时，必须对输入重新编号。试试下面的方法

$('div#ChampionInput').on('click', 'a.Remove',function(){
    var champion = $(this).closest('.Champion');
    var id = champion.data("id");
    var nextChampion = champion;

    //
    // Loop through each following champion
    while((nextChampion = nextChampion.next()).length != 0){
        // Update id
        nextChampion.attr("data-id",id++)

        // Update placeholder
        // Placeholder is id + 1 because placholders start at 1 and ids start at 0
        nextChampion.find(".ChampionInput").attr("placeholder","Champion " + (id + 1));        
    }

    // Remove champion
    champion.remove();

});

---

顺便说一下，您不需要将标记名放在选择器之前。特别是对于ID，每个页面都应该是唯一的

#championput

与

div#championput

完全相同，只是

#championput

更快，因为浏览器不必检查标记名是否匹配。

您不应该使用championnumeraray和championNumber来存储输入量，相反，你应该计算所有类别为“Champion”的div，以获得当前数量

$("div.Champion").length;

添加输入时，u应使用上述方法设置“id”值

---

当一个输入被删除时，你应该在删除之前得到它的“id”值。。。删除后，您可以执行以下操作（（假设“3”已删除））

---

您不应该使用championNumberArray和championNumber来存储输入数量，而应该使用类“Champion”来计算所有div以获得当前数量

$("div.Champion").length;

添加输入时，u应使用上述方法设置“id”值

---

当一个输入被删除时，你应该在删除之前得到它的“id”值。。。删除后，您可以执行以下操作（（假设“3”已删除））

---

这很好用，但是有没有办法快速相应地更改placeholde值？我更新了它，所以它也更新了占位符。但似乎您还必须更改添加代码，以便新的champions输入具有正确的占位符。新的冠军也可能被错误的id添加。如果有帮助，您可以使用

$（“.championput”）.length

来获取冠军的数量，以便计算这些值。这非常有效，但是否有任何方法可以相应地快速更改placeholde值？我对其进行了更新，因此它也会更新占位符。但似乎您还必须更改添加代码，以便新的champions输入具有正确的占位符。新的冠军也可能被错误的id添加。如果有帮助，您可以使用

$（“.championput”）.length

获取冠军人数，以便计算这些值。