Edit in JSFiddle

var myCollection = new Backbone.Collection([
    {name: "Tom Jones"},
    {name: "Omar Williams"},
    {name: "Tina Houstan"}
]);

var Signature = Backbone.View.extend({
    events: {
        "click button": "add"
    },
    add: function() {
        if (v = this.$('input').val()) {
            myCollection.add({name: v});
            this.$('input').val('');
        }    
    }
});

var Entry = Marionette.ItemView.extend({
    tagName: "li",
    events: {
        "click .remove": "destroy"
    },
    template: function(data) {
      return data.name + "<span class='remove'> X</span>";
    }
});

var ListView = Backbone.View.extend({
    childView: Entry,
    initialize: function(options) {
      this.collection = options.collection;
        this.collection.on('add', this.render, this);
    },
    render: function() {
        this.$el.html('');
        this.collection.each(function(model) {
            var view = new this.childView({
                model: model
            }).render();
            
            this.$el.append(view.el);
        }, this);
    }
});

new ListView({
    el: "ul",
    collection: myCollection,
}).render();

new Signature({
    el: $('.sign-in')
}).render();

<h1> The guest book </h1>
<hr>
<ul></ul>
    <div class='sign-in'>
    <input placeholder="sign your name"/>
    <button>Submit</button>
    </div>

.remove {
    cursor: pointer;
}