Reputation: 62484
.parent() is not returning the parent element that I'm specifying. I don'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>
Upvotes: 6
Views: 11345
Reputation: 449783
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()
).
Upvotes: 9
Reputation: 322592
The element you're referencing is not a direct parent.
Try this instead:
that.remove(jQuery(this).closest('.vehicle-year-profile'));
Upvotes: 5