Add/Remove HTML Dynamically 2

Add/Remove HTML Dynamically 2

by Nirvanachain

HTML

<form id="myForm">
    <div style="margin-bottom:4px;" class="clonedInput">
        <input type="button" name="btnDelete1" class="btnDel" value="Delete" disabled="disabled" />
        <input class="tclass" type="text" name="input1" />
        <br />
        <input class="zclass" type="text" name="ip1" />
    </div>
    
    <div>
        <input type="button" id="btnAdd" value="add another name" />
    </div>
</form>

JavaScript

$(document).ready(function() {
    
    var inputs = 1;
    
    $('#btnAdd').click(function() {
        $('.btnDel:disabled').removeAttr('disabled');
        var c = $('.clonedInput:first').clone(true);
        
            c.children('.tclass').attr('name','input'+ (++inputs) ).val('');
        
        c.children('.zclass').attr('name','ip'+ (++inputs) ).val('');
        
            c.children(':button').attr('name','btnDelete'+ (inputs) );
        $('.clonedInput:last').after(c);
    });
    
    $('.btnDel').click(function() {
        if (confirm('continue delete?')) {
            --inputs;
            $(this).closest('.clonedInput').remove();
            $('.btnDel').attr('disabled',($('.clonedInput').length  < 2));
            fixNames();
        }
    });
    
    function fixNames(){
        var i = inputs;
        while(i--) {
            $('input:text')[i].name = 'input'+ (i+1);
            $('input:button')[i].name = 'btnDelete'+ (i+1);
        }
    }
    
});