Edit in JSFiddle

/*  First We are Creating a Class Which will cover basic logic */
/*  The motive here is to show you one possible way to separate DOM-less and UI-layer with clear-cut boundaries, There are many possible ways, MVC Framework like backbone gives you such separation by default. */

/**  Part 1-  DOM-LESS , Core Part which do not deal with any dom Element and Any Events **/

var Developer = klass({
    initialize: function (name, githubHandle, emailId) {
        this._name = name;
        this._githubHandle = githubHandle;
        this._emailId = emailId;
    }
});

var DeveloperList = klass({
    initialize: function () {
        this._list = [];
    },
    addDeveloper: function (config) {
        this._list.push(new Developer(config.name, config.githubHandle, config.emailId));
        this.onModelUpdate();
    },
    removeDeveloper: function (index) {
        if (index >= 0 && index < this._list.length) {
            this._list.splice(index, 1);
        }
        this.onModelUpdate();
    },
    getList: function () {
        return this._list;
    },
    onModelUpdate: function(){
      //We do not need any Render function here. Derived class will override this render function.
    
    }
});

/**  Part 2 -  Following part will deal with DOM element and events **/

_.templateSettings.interpolate = /\{\{(.+?)\}\}/g;
_.templateSettings.evaluate = /<!--([\s\S]+?)-->/g;
_.templateSettings.escape = /\{\{-(.+?)\}\}/g;


//This is utility function, This gives us Backbone type syntax !
var bindEventsHandlers = function(){
    for(var key in this.events){
        var self = this;
        if(this.events.hasOwnProperty(key) === true){
            var hander = this.events[key];
            var arr = key.split(" ");
            var method = arr.shift();
            var hash = arr.join(" ");
            if (hash === "") {
                this.$el.on(method, function(e) {
                    self[hander].call(self, e, e.target);
                });
            } else {
                this.$el.on(method, hash, function(e) {
                    self[hander].call(self, e, e.target);
                });
            }
        }
    }
}

var DeveloperList_Ele = DeveloperList.extend({
    initialize: function ($el) {
        DeveloperList.call(this);
        this.$el = $el;
        this.onModelUpdate();
        bindEventsHandlers.call(this);
    },
    events: {
        "click .remove":"remove"
    },
    remove: function (event) {
        var index = parseInt(event.target.getAttribute("data-index"),10);
        this.removeDeveloper(index);
    },
    onModelUpdate: function(){
        //We are redering the whole template, but in actual senerio, we can render a part of it !
        this.$el.html(_.template($("#developerList").html())(this));
    },
});

// Module Code, This code can be written using Backbone.js
//We are passing where to load $("#list") in arguments !

var x = new DeveloperList_Ele($("#list"));
x.addDeveloper({
    name: "Jeremy Ashkenas",
    githubHandle: "jashkenas",
    emailId:"jashkenas@gmail.com"
});
x.addDeveloper({
    name: "Addy Osmani",
    githubHandle: "addyosmani ",
    emailId:"addyosmani@gmail.com"
});

window.setTimeout(function(){
x.addDeveloper({
    name: "Zeno Rocha",
    githubHandle: "zenorocha",
    emailId:"hi@zenorocha.com"
});
},2000);

window.setTimeout(function(){
x.addDeveloper({
    name: "Narendra Sisodiya",
    githubHandle: "nsisodiya",
    emailId:"narendra@narendrasisodiya.com"
});
},4000);
<script type="text/template" id="developerList">
    <!--_.each(obj.getList(), function(v,i){-->
    <div class="wrapperDiv">
        <div><b>{{v._name}}</b></div>
        <div><a href="https://github.com/{{v._githubHandle}}">{{v._githubHandle}}</a></div>
    <img src="http://www.gravatar.com/avatar/{{md5(v._emailId)}}">
        <div class="remove" data-index="{{i}}" class="remove">&#10008;</div>
         </div>
    <!--}) -->
        <div style="clear:both">Total Developers in list is {{obj.getList().length}}</div>
       
</script>
<div id="list"></div>
div.wrapperDiv {
float: left;
padding: 17px;
border: 1px solid #ccc;
margin-right: 10px;
position:relative;
}
div.remove {
position: absolute;
top: 3px;
right: 5px;
cursor:pointer;
}
img {
    padding-top: 10px
    
}

External resources loaded into this fiddle: