Javascript 将正确的ID重新分配给子视窗

所以我在jquery中创建了动态表单，所以您可以添加类似于主类别的冠军

然后可以添加类似子类别的常规更改

如果你有3个冠军，ID像1，2，3，每个冠军都有自己的子类别，然后你删除中间的一个ID-2个ID将变为1，3将跳转到第二个ID的位置，并将ID变为2，这样它将按数字顺序排列

子类别也有ID[1,2,3,4]，这是冠军的数量，所以当我删除2个冠军类别时，也应该相应地更改

这是一张显示我的问题的图片，现在您可以看到绿色[2][0]，它是[3][0]，并且

这里是HTML

    <div id="wrap">
    <form name="second_form" id="second_form" action="#" method="POST"> <a href="#" id="AddChampion" onclick="return false;">Add Champion</a>

        <div id="ChampionInput"></div>
        <br>
        <input type="submit" name="submit">
    </form>
</div>

JQUERY：

$(document).ready(function () {
    $('#second_form').removeAttr('novalidate');
    championNumberArray = 0;
    championNumber = 1;
    $('a#AddChampion').on('click', function () {
        $('div#ChampionInput').append(
            '<div class="Champion" data-id="' + championNumberArray + '">\
             <a href="#" class="Remove" onclick="return false;">Remove</a>\
             <br>\
             <input type="text" class="ChampionInput" list="champions" name="champion[]" placeholder="Champion ' + championNumber + '" required>\
             <a href="#" class="AddGeneralChange" onclick="return false;">Add General Change</a>\
             <div class="GeneralChanges">\
             </div>\
             <br>\
         <div>');
        championNumberArray++;
        championNumber++;
    });
    $('div#ChampionInput').on('click', 'a.Remove', function () {
        var champion = $(this).closest('.Champion');
        var id = champion.data("id");
        var nextChampion = champion;
        while ((nextChampion = nextChampion.next()).length != 0) {
            nextChampion.attr("data-id", id++);
            nextChampion.children('.ChampionInput').attr('placeholder', 'Champion ' + id);
        }
        championNumber = id + 1;
        championNumberArray = id;
        champion.remove();
    });
    $('div#ChampionInput').on('click', 'a.AddGeneralChange', function () {
        $(this).siblings('.GeneralChanges').append(
            '<div class="GeneralChange">\
                <textarea type="text" size="20" rows="3" cols="50" maxlength="500" name="GeneralChangeDescription[' + $(this).parent('div').data('id') + '][]" placeholder="Enter General Change Description" required></textarea>\
                <a href="#" class="RemoveGeneralChange" onclick="return false;">Remove General Change</a>\
            </div>');
    });
    $('div#ChampionInput').on('click', 'a.RemoveGeneralChange', function () {
        $(this).closest('.GeneralChange').remove();
    });

});

---

这里还有一个正在工作的JSFIDLE:

这是在动态HTML中使用id属性的常见问题。@MaxZoom这是我第一次处理动态HTML和JQuery tbh，所以我可能做了一些完全错误的事情。有没有更简单的方法来实现我想要的？为什么id对您很重要？如果只是在您提交的时候，那么您可以在提交函数中添加它们。@Saar在提交表单后，如果没有这些ID，我将如何获得正确的顺序？sadd javascript函数CreateID按顺序分配ID：