jQuery closest() remove() on <a> doesn't work?

Please see this page which has this code:

<div class="pure-control-group query-brand-by-column">
  <!-- somethings else -->
  <div class="pure-u-1 pure-u-sm-1-24 control-group-sub">
  <a href="javascript:$(this).closest('.query-brand-by-column').remove();" class="pure-button danger">X</a>
  </div>
</div>

Code (markup):

Clicking the X link should remove its ancestor div.query-brand-by-column as a whole but somehow it's not working. I've checked jQuery docs and this answer and the code seems absolutely all right to me but it simply doesn't work. Any idea?

 

Please, for the love of God, don't try to use inline jQuery. Put it in a proper function, in script tags or preferably an external js file.

 

Digging through someone else's code is never fun. Try to use this instead:

http://jsfiddle.net/jaredwilli/tZPg4/4/