Edit in JSFiddle

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

var Signature = Marionette.ItemView.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>";
    }
});

new Marionette.CollectionView({
    el: "ul",
    collection: myCollection,
    childView: Entry
}).render();

new Signature({
    template: false,
    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;
}