Question

我在JavaScript中生成动态表单，当我按ID删除表单时，我不知道如何按顺序1,2,3设置ID ...您可以在jsfiddle上查看我的代码

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

抱歉我的英语不好。

感谢。

Answer 1

在i--;函数中添加removeElement，我觉得这很好用。

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);
}

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

请参阅updated fiddle

Answer 2

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

首先，为了便于选择，我将类interview添加到每个div。然后当你删除div时，尝试保存已删除div的索引。最后，递减所有具有索引＆gt; =已删除索引的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();    
    }
};

这是我的Fiddle进一步测试..

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

2 个答案: