selecting the first parent
<p>js</p>

<pre><code>$(".deletable").live('click',function(){
      $(this).parent().effect('explode', 500, function(){
            $(this).parent().remove();
      })
});
</code></pre>

<p>html</p>

<pre><code>&lt;table&gt;
    &lt;tr&gt;
        &lt;td class='deletable'&gt;hi&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;

&lt;ul&gt;
    &lt;li&gt;
        &lt;span class=deletable&gt;hi&lt;/span&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I want to remove the <code>tr</code> in case <code>td</code> is clicked and the <code>li</code> case <code>span</code> is clicked.</p>

<p>For some reason this is not working and instead the whole <code>ul</code>/<code>table</code> is deleted.</p>

<p>Why so ?</p>
