jQuery Add/Remove Input Fields

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

by Eric Hynds

HTML

<script src="http://ivaynberg.github.com/select2/select2-master/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-master/select2.css">
<a href id="addEvent">Add Event</a>

<div id="events">
    Loading...
</div>

CSS

.row {
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid black;
}

* { font-family:Arial; }
h2 { padding:0 0 5px 5px; }
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

var select = {    
    init: function(videoID) {
        this.videoID = videoID;
        
        this.fetch().done($.proxy(function(data) {
            console.log("data is back!", data);
            
            this.events = data.events;
            this.data = data;
            this.cacheElems();
            this.bindEvents();
            
            if(videoID) {
                this.preselect();
            } else {
                this.createRow();
            }
        }, this));
    },

    fetch: function() {
        return $.ajax({
            url: 'http://bcc-silverline.elasticbeanstalk.com/search',
            type: 'get',
            dataType: 'json'
        });
    },
    
    cacheElems: function() {
        this.$container = $("#events").empty();
        this.$select = this.$container.find("select");
        this.$add = $("#addEvent");
    },
    
    bindEvents: function() {
        this.$add.on("click", $.proxy(function(event) {
            event.preventDefault();
            this.createRow();
        }, this));
        
        this.$container.on("change", "select", $.proxy(function(event) {
            this.createPlaylist(event.currentTarget);
        }, this));
    },
    
    createRow: function(options) {
        options = $.extend({}, {
            preselect: null
        }, options || {});
        
        var html = '<div class="row">';
        html += '<select>';
        html += '<option>Select event</option>';
        $.each(this.events, function(i, event) {
            html += '<option value="' + event.name + '"';
            if(options.preselect && options.preselect === event.name) {
                html += ' selected';
            }
            html += '>';
            html += event.name;
            html += '</option>';
        });
        html += '</select>';
        html += '<div class="playlists"></div>';
        html += '</div>';
               
        var $row = $(html);
        this.$container.append($row);
        return...