Using jQuery to remove html elements from a dropdown

<script>

    $(document).ready(function() {
        $('.notification .tools .remove').on('click', function () {
            alert('hola');
            $(this).parentsUntil('notification').remove();
        });
    });


</script>

<div id="notification-list" class="notification-chain" style="display:none">

    @foreach ($notifications as $notification)

    <div class="notification" style="width:300px">

        <div class="tools">
            <a href="javascript:;" class="remove"></a>
        </div>

        <div class="notification-messages">

            <div class="message-wrapper">

                <div class="heading">{{ $notification->name }}</div>
                <div class="description">{{ 'User ' .$notification->points_to. ' ' .$notification->content }}</div>
                <div class="date pull-left">{{ $notification->created_at }}</div>

            </div>

            <div class="clearfix"></div>

        </div>

    </div>

    @endforeach

</div>

Hello readers,

Above is currently what I'm working with. It displays a drop-down to hold all notifications a user has received and I currently have an x in the top corner of each "notification" div.

However none of the above jQuery seems to be running. The alert won't display and I get nothing in the console.

Please feel free to ridicule me and tell me what stupid thing I'm doing wrong.

Many thanks.

via Chebli Mohamed