特定のDIV内のアンカーがクリックされたらDIV自身を非表示

jQuery

次のようなHTMLがあって

<body>
<div class="panel">
  <div>
    <a href="#">test1</a>
    <a href="#">test2</a>
    <a href="#">test3</a>
  </div>
</div>
<div class="panel">
  <a href="#">test4</a>
  <a href="#">test5</a>
  <a href="#">test6</a>
</div>
<div class="panel">
  <a href="#">test7</a>
  <a href="#">test8</a>
  <a href="#">test9</a>
</div>
<div class="panel">
  <a href="#">test10</a>
  <a href="#">test11</a>
  <a href="#">test12</a>
</div>
</body>

アンカーがクリックされたときにそのアンカーが含まれるpanelというクラス名のdivを非表示にしたい場合にjQueryでどうかくの？

最初

<script type="text/javascript">
$(document).ready(function(){
    $("div[@class=panel] a").click(function(){
        $(this).parent().hide();
    });
});
</script>

と書いてみたものの、divが入れ子になってしまっているとparent()じゃ入れ子のdivが非表示になってしまいpanelクラスのdivは非表示にできない。

というわけで、以下が正解？

<script type="text/javascript">
$(document).ready(function(){
    $("div[@class=panel]").each(function(){
        var target = this;
        $(this).find("a").click(function(){
            $(target).hide();
        });
    });
});
</script>

結局var targetとしてそこに一旦Xpathで指定した要素をつっこんで解決と。
他にもっとスマートな方法ってありそうな気がしつつ寝る。