Removing a row from a when an element in the row is clicked
<p>I have a list of items, which I will be presenting to the user as table rows.</p>

<p>Each row will have a small 'x' image in the top right hand corner, which when clicked will cause the following behaviour:</p>

<ul>
<li>Prompt the user (Yes/Cancel) if they want to delete the row</li>
<li>If user clicks cancel nothing happens, if yes, then delete the row and update the table.</li>
</ul>

<p>The html looks something like this:</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;script type="text/javascript" src = jquery.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
       &lt;table&gt;&lt;tbody&gt;
          &lt;tr&gt;
             &lt;td&gt;&lt;div class="delbtn"&gt;&lt;/div&gt;
                 &lt;div class="rowitem"&gt;This one line item&lt;/div&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;td&gt;&lt;div class="delbtn"&gt;&lt;/div&gt;
                 &lt;div class="rowitem"&gt;This another line item&lt;/div&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;td&gt;&lt;div class="delbtn"&gt;&lt;/div&gt;
                 &lt;div class="rowitem"&gt;blah, blah, blah&lt;/div&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
       &lt;/table&gt;
       &lt;script type="text/javascript"&gt;
           $().ready(function(){
               // What to do ?
            });
       &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Clearly, I have to bind to the div.delbtn pattern, but how do I know the row that was clicked on, and how do I delete that row from the table?</p>
