Javascript 动态删除后如何更改表单id？

我正在用JavaScript生成一个动态表单，当我按id删除表单时，我不知道如何按顺序1、2、3设置id。。。您可以在JSFIDLE上查看我的代码

对不起，我的英语不好

谢谢。

通过添加

i--

在您的

removelement

函数中，我认为这很好用

window.removeElement = function(parentDiv, childDiv){

    if (document.getElementById(childDiv)){
        var child = document.getElementById(childDiv);
        child.parentNode.removeChild(child);
        i--;
        //decrement();    
    }
};

评论后更新：

我为每个创建的表单添加了一个类，然后我循环所有包含该类的元素并更新表单编号

var forms = document.getElementsByClassName('interview-form');
console.log(forms);
for(var j = 0; j < forms.length; j++){
    console.log(forms[j].getElementsByTagName('h2'));
    forms[j].getElementsByTagName('h2')[0].innerHTML = 'Interview '+ (j+2);
}

var forms=document.getElementsByClassName（'interview-form'）；
控制台日志（表格）；
对于（var j=0；j

小提琴被更新了（但我只是为H2元素做的）。如果有更多问题，请发表评论

通过添加

i--，参见

在您的

removelement

函数中，我认为这很好用

window.removeElement = function(parentDiv, childDiv){

    if (document.getElementById(childDiv)){
        var child = document.getElementById(childDiv);
        child.parentNode.removeChild(child);
        i--;
        //decrement();    
    }
};

评论后更新：

我为每个创建的表单添加了一个类，然后我循环所有包含该类的元素并更新表单编号

var forms = document.getElementsByClassName('interview-form');
console.log(forms);
for(var j = 0; j < forms.length; j++){
    console.log(forms[j].getElementsByTagName('h2'));
    forms[j].getElementsByTagName('h2')[0].innerHTML = 'Interview '+ (j+2);
}

var forms=document.getElementsByClassName（'interview-form'）；
控制台日志（表格）；
对于（var j=0；j

小提琴被更新了（但我只是为H2元素做的）。如果有更多问题，请发表评论

---

请参见

，因为您在小提琴上添加了jQuery，所以我使用jQuery是因为它更简洁

首先，为了便于选择，我在每个div中添加class

interview

。然后，当您删除一个div时，尝试保存已删除div的索引。最后，减小所有索引大于等于已删除索引的div的值

window.removeElement = function(parentDiv, childDiv){

    if (document.getElementById(childDiv)){
        var child = document.getElementById(childDiv);
        child.parentNode.removeChild(child);

        //save the index of removed element
        var removed_index = Number(childDiv.split("_")[1]);

        //add class interview to all divs
        $(".interview").each(function(index){
            if(index + 1 >= removed_index){
                //if true, change the title and id
                $(this).find("h2").text("Interview "+(index+1));
                $(this).attr("id", "id_"+(index + 1));
                $(this).find("button").attr("onclick", "removeElement('myCandidat','id_"+(index + 1)+"')");
            }
        });
        i--;
        //decrement();    
    }
};

---

这是我的进一步测试建议。

因为您在小提琴上添加了jQuery，所以我使用jQuery，因为它更简洁

首先，为了便于选择，我在每个div中添加class

interview

。然后，当您删除一个div时，尝试保存已删除div的索引。最后，减小所有索引大于等于已删除索引的div的值

window.removeElement = function(parentDiv, childDiv){

    if (document.getElementById(childDiv)){
        var child = document.getElementById(childDiv);
        child.parentNode.removeChild(child);

        //save the index of removed element
        var removed_index = Number(childDiv.split("_")[1]);

        //add class interview to all divs
        $(".interview").each(function(index){
            if(index + 1 >= removed_index){
                //if true, change the title and id
                $(this).find("h2").text("Interview "+(index+1));
                $(this).attr("id", "id_"+(index + 1));
                $(this).find("button").attr("onclick", "removeElement('myCandidat','id_"+(index + 1)+"')");
            }
        });
        i--;
        //decrement();    
    }
};

---

这是我的进一步测试。

如果我创建了3张表格，删除了第二张表格，我有面试1和面试3，我需要面试1，面试2哦，好吧，我不明白，我会看一看谢谢！！对不起，我的问题不够清楚！！没问题！我更新了我的答案Merci beaucoup Mteuahasan！！！如果我创建了3个表单，删除了第二个表单，我有interview1和interview3，我需要interview1，interview2Oh好的，我不明白，我会看一看谢谢！！对不起，我的问题不够清楚！！没问题！我更新了我的答案Merci beaucoup Mteuahasan！！！它工作得很好谢谢你的解决方案：D！但是当我试图删除第二个表单时，它不起作用？？我忘记在

onclick

函数中重命名字符串。。已经编辑了代码和小提琴。非常感谢，它工作得非常完美！！谢谢你的解决方案：D！但是当我试图删除第二个表单时，它不起作用？？我忘记在

onclick

函数中重命名字符串。。已经编辑了代码和小提琴。非常感谢，它工作得非常完美！！