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

我有一个带有选择元素的表单，我想通过选择添加和删除其中的一些元素。这是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, select和加减号链接)。但是，对于新行，我需要为元素添加新的id和名称(使用数字，例如type_name_1、type_name_2等，仅更改索引号)。
单击减号，将删除该特定行，并重新编号所有剩余元素的id。

Ok再次添加select元素并添加新ID，并删除最后添加的select元素，您可以执行以下操作:

$('#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结构:

<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可能会实时产生问题

相关内容

最新更新

热门标签：