Добавить/удалить элементы с помощью JavaScript (добавить/удалить поля с пронумерованными идентификаторами и именами)

Question

У меня есть форма с выделенными элементами, и я бы хотел добавить и удалить по выбору некоторые из этих элементов. Это HTML код (также jsfiddle здесь http://jsfiddle.net/txhajy2w/):

<form id="Form" action="#" method="POST"> 
    <div id="FormContainer"> 
     <div class="Row" id="container_0"> 
      <a id="delete_link_0"> 
       <i class="glyphicon glyphicon-minus"></i> 
      </a> 
      <select class="type_name" name="type_name_0" id="type_name_0"> 
       <option value="">Select an Option</option> 
       <optgroup label="All Options"> 
        <option value="1">Option 1</option> 
        <option value="2">Option 2</option> 
        <option value="3">Option 3</option> 
       </optgroup> 
      </select> 
      <a id="new_link_0"> 
       <i class="glyphicon glyphicon-plus"></i> 
      </a> 
     </div> 
    </div> 
    <div> 
     <input type="submit" name="submit" value="Submit"> 
    </div> 
</form> 

Что мне нужно это:

• нажав на знак плюс будет генерировать новую строку (в том числе DIV, выберите и плюс/минус ссылки). Однако мне понадобится новая строка, новые идентификаторы и имена для элементов (используя числа, например, type_name_1, type_name_2 и т. Д., Изменяя только номер индекса).
• нажав на знак минус, удалит эту конкретную строку и перечислил все идентификаторы остальных элементов.

Answer 1

Ok добавить select элемент снова с новым идентификатором и удалить последний добавленный выберите элемент, который вы можете сделать, как показано ниже:

DEMO

$('#new_link_0').on('click',function(){ 
    var select=$('.wrap').find('select:last').clone(); 
    var id=$(select).attr('id').split('_')[2]; 
    $(select).attr('id','type_name_'+parseInt(id+1)); 
    $(select).attr('name','type_name_'+parseInt(id+1)); 
    $(select).insertAfter('.wrap select:last'); 
}); 

$('#delete_link_0').on('click',function(){ 
    $('.wrap').find('select:last').remove(); 
}); 

UPDATE

Чтобы добавить новый элемент каждый раз и сбросить весь набор ids на надлежащее количество вы можете сделать, как показано ниже, но вы должны следовать ниже html структуры:

DEMO

HTML

<form id="Form" action="#" method="POST"> 
    <div id="FormContainer">    
     <div class="Row" id="container_0"> 
      <div class="wrap"> 
       <div class="element"> //wrap each cloning element inside a div 
        <a id="delete_link_0" href="#" class="minus"> 
         <i class="glyphicon glyphicon-minus"></i> 
        </a> 
        <select class="type_name" name="type_name_0" id="type_name_0"> 
         <option value="">Select an Option</option> 
         <optgroup label="All Options"> 
          <option value="1">Option 1</option> 
          <option value="2">Option 2</option> 
          <option value="3">Option 3</option> 
         </optgroup> 
        </select> 
        <a id="new_link_0" href="#" class="plus"> 
         <i class="glyphicon glyphicon-plus"></i> 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div> 
     <input type="submit" name="submit" value="Submit"/> 
    </div> 
</form> 

JS

$(document).on('click','.plus',function(){ 
    var element=$('.wrap').find('.element:last').clone();//clone last element always 
    var id=parseInt($(element).find('select').attr('id').split('_')[2])+1; 
    $(element).find('select').attr('id','type_name_'+id); 
    $(element).find('.plus').attr('id','new_link_'+id); 
    $(element).find('.minus').attr('id','delete_link_'+id); 
    $(element).find('select').attr('name','type_name_'+id); 
    $(element).insertAfter('.wrap .element:last'); //insert at the end once modification to the cloned elements has been done 
}); 

$(document).on('click','.minus',function(){ 
    if($('.wrap .element').length===1) //check for the length if there is only one element then prevent it from deleting 
    { 
     alert('Cannot delete this! Atleast one item must be there'); 
     return false; 
    } 
    $(this).parents('.element').remove(); 
    $.each($('.element'),function(index,value){//find each .element and reset the `ids` of the controls inside it 
     $(this).find('.minus').attr('id','delete_link_'+index); 
     $(this).find('.plus').attr('id','new_link_'+index); 
     $(this).find('select').attr('id','type_name_'+index).attr('name','type_name_'+index); 
    }); 
}); 

Примечание: Сброс ids может создать проблемы в режиме реального времени, если вы такие операции, осуществляемые в вас поток