Как изменить идентификатор формы после удаления динамически?

Question

я генерация динамической формы в JavaScript, и когда я удалить форму по идентификатору я не знаю, как установить идентификаторы в порядке 1,2,3 ... Вы можете просмотреть свой код на jsfiddle

https://jsfiddle.net/wdLtv01x/1/

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

Update после комментариев:

Я добавил класс для каждой созданной формы, то я петлю во всех элементах, которые имеют этот класс и обновлять номер формы.

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 к каждому divs. Затем, когда вы удаляете div, попробуйте сохранить индекс удаленного div. Наконец, уменьшите значение всех div, у которых есть index> = удаленный индекс.

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 для дальнейшего тестирования ..