Add three inputs dynamically, delete

http://community.sitepoint.com/t/use-array-based-on-user-input/199099

by Akram kamal

HTML

<form id="add-container">
    <label>Type: <input type="text" id="c-type"/></label>
    <label>Serial: <input type="text" id="c-serial"/></label>
    <label>Owner: <input type="text" id="c-owner"/></label>     
    <button>Add</button>
</form>

<ul id="containers"></ul>

CSS

#containers li a {
    margin-left: 10px;
    color:red;
}

JavaScript

$(document).ready(function(){

    //get form
    var form = $('#add-container');
    
    //attach click event handler to button in form
    $('button', form).on('click', function(event){
    
        //prevent form from being submitted
        event.preventDefault();
        
        //get values from inputs
        var type = $('#c-type', form).val();
        var serial = $('#c-serial', form).val();
        var code = $('#c-owner', form).val();
        
        //glue values with dot 
        var container = [type, serial, code].join('.');
        
        //create <li> element and put result in it
        var containerItem = $('<li/>').html(container);
        
        //create X link
        var deleteItemLink = $('<a/>').html('X').attr('href', '#');
        
        //remove parent <li> when X link is clicked
        deleteItemLink.on('click', function(event){
            event.preventDefault();
        	$(this).parent('li').remove();
        });
        
        //add X link to <li>
        containerItem.append(deleteItemLink);
        
        //add <li> to list
        $('#containers').append(containerItem);
        
        //clear all text inputs
        $('input:text', form).val('');
    
    });

});