Question

I have a View like so:

(function(views) {
    views.FilterView = Backbone.View.extend({
        tagName: 'div',
        events: {
            'click a.remove': 'remove'
        },
        template: _.template($("#filterViewTemplate").html()),

        render: function() {
            this.$el.html(this.template());
            return this;
        },
        remove: function (e) {
            this.remove();
            this.unbind();
        }
    });
})(app.views);

It’s template is:

<script type="text/html" id="filterViewTemplate">
    <select class="filterByOption">
        <option value="Account">Account</option>
        <option value="Owner">Owner</option>
    </select>

    <span class="cell sort">
        <input class="filterString cell" type="text" />
    </span>
    <a href="#" class="btn small remove">Remove</a>
</script>

But when I click on Remove I get the following error:

Uncaught RangeError: Maximum call stack size exceeded

Answer 1

That’s because in your remove method your calling this.remove() which calls remove() which calls remove() which calls remove()…