jQuery.parent() doesn't appear to be working

.parent() is not returning the parent element that I'm specifying. I don开发者_StackOverflow't see any problems with my code or html.

Javascript:

var vehicle = function () {
    return {
        init: function () {
            var that = this;

            jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) {
                e.preventDefault();
                console.log(e.currentTarget); //  [a.close #]
                that.remove(jQuery(e.currentTarget).parent('.vehicle-year-profile'));
            });
        },
        remove: function (el) {
            console.log(el); // []
            jQuery(el).remove();
        }
    }
}();
jQuery(function() {
    vehicle.init();
});

HTML:

    <div id="vehicle-101031994" class="vehicle-year-profile">
                                        <div class="left">
                                            <h4>1994</h4>
                                        </div>
                                        <div class="right options">
                                            <a class="edit" href="#"><img class="icon-small" src="/image/icons/pencil.png"></a>
                                            <a class="delete" href="#"><img class="icon-small" src="/image/icons/delete.png"></a>
                                        </div>
                                        <div class="clear"></div>
</div>

This is because

The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree.

the parent you are looking for is two levels up, so you'll have to use .parents() (or even better .closest()).

The element you're referencing is not a direct parent.

Try this instead:

that.remove(jQuery(this).closest('.vehicle-year-profile'));