Symfony2 Form CollectionType remove

wizard.html.twig

{% extends '::base.html.twig' %}

{% from 'MopaBootstrapBundle::icons.html.twig' import icon %}

{% macro widget_prototype(widget, remove_text) %}
    {% from 'MopaBootstrapBundle::icons.html.twig' import icon %}

    {% if widget.get('prototype') %}
        {% set form = widget.get('prototype') %}
        {% set name = widget.get('prototype').get('name') %}
    {% else %}
        {% set form = widget %}
        {% set name = widget.get('full_name') %}
    {% endif %}

    <div class="well well-small" data-content="{{ name }}">
        <a class="btn btn-remove btn-danger btn-small pull-right" data-related="{{ name }}">{{ icon('minus', true) }}{{ remove_text }}</a>
        {{ form_widget(form) }}
    </div>
{% endmacro %}

{% block content %}

{# ... #}

    <div id="booking_wizard_catchment_areas" data-prototype="{{ _self.widget_prototype(form.catchment_areas, 'wizard.booking.interaction.remove_catchment_area'|trans, 'catchment-area-remove')|escape }}">
    {% for widget in form.catchment_areas.children %}
        {{ _self.widget_prototype(widget, 'wizard.booking.interaction.remove_catchment_area'|trans) }}
    {% endfor %}
    </div>
    <a class="btn btn-add btn-success btn-small" data-target="booking_wizard_catchment_areas">{{ icon('plus', true) }}{{ 'wizard.booking.interaction.create_catchment_area'|trans }}</a>

    {{ form_widget(form.catchment_areas) }}

{# ... #}

{% endblock }

{% block javascripts %}
    {{ parent() }}

    <script>
        $('.btn-add').click(function(event) {
            var collectionHolder = $('#' + $(this).attr('data-target'));
            var prototype = collectionHolder.attr('data-prototype');
            var form = prototype.replace(/__name__/g, collectionHolder.children().length);

            collectionHolder.append(form);

            return false;
        });
        $('.btn-remove').live('click', function(event) {
            var name = $(this).attr('data-related');
            $('*[data-content="'+name+'"]').remove();

            return false;
        });
    </script>
{% endblock %}