javascript - 使用 JavaScript 添加/删除元素(添加/删除带有编号 ID 和名称的字段)

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、选择和加/减链接)。但是，我需要新行、元素的新 ID 和名称(使用数字，例如 type_name_1、type_name_2 等，仅更改索引号)。
• 点击减号将删除该特定行，并对剩余元素的所有 ID 重新编号。

Answer 1

可以使用新 ID 再次添加 select 元素，并删除最后添加的 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();
});

更新

要每次添加一个新项目并将整个 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);
    });
});

Note: Resetting the ids might create problem in realtime if you have such operations carried out in you flow