jQuery Add/Remove Input Fields

A script that uses event delegation and the .live() method for adding and deleting extra input form fields.

by Spokey

HTML

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts">
            <input type="text" class="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" />
        </label>
    </p>
</div>

CSS

* {
    font-family:Arial;
}
h2 {
    padding:0 0 5px 5px;
}
h2 a {
    color: #224f99;
}
a {
    color:#999;
    text-decoration: none;
}
a:hover {
    color:#802727;
}
p {
    padding:0 0 5px 0;
}
input {
    padding:5px;
    border:1px solid #999;
    border-radius:4px;
    -moz-border-radius:4px;
    -web-kit-border-radius:4px;
    -khtml-border-radius:4px;
}

JavaScript

$(function () {
    var json = {
        "welcomeList": ["Thanks for coming", "Please select from the following list", "dwadwadsds"],
            "endList": ["Press come again", "Press 0"]
    };

    $.each(json.welcomeList, function (_, vv) {
        $('#p_scents > p:first-child').clone().find('input').val(vv).end().append('<a href="#" id="remScnt">Remove</a>').appendTo('#p_scents');
    });

    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').live('click', function () {
        $('<p><label for="p_scnts"><input type="text" id="p_scnt_' + i + '" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
        return false;
    });

    $('#remScnt').live('click', function () {
        if (i > 2) {
            $(this).parents('p').remove();
            i--;
        }
        return false;
    });
});