title: jQuery Remove LI from UL with a hyperlink in the LI
body: <p>I have a unordered list:</p>
  
  <pre><code>&lt;ul id="sortable"&gt;
    &lt;li id="1" class="ui-state-default"&gt;First &lt;a href='#' title='delete' class="itemDelete"&gt;x&lt;/a&gt;&lt;/li&gt;
    &lt;li id="2" class="ui-state-default"&gt;Second &lt;a href='#' title='delete' class="itemDelete"&gt;x&lt;/a&gt;&lt;/li&gt;
    &lt;li id="3" class="ui-state-default"&gt;Third &lt;a href='#' title='delete' class="itemDelete"&gt;x&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want to remove the <code>&lt;li&gt;</code> from the <code>&lt;ul&gt;</code>. I have handled the click event of the class itemDelete where I try to do a remove but I assume its not working because I can't remove the <code>&lt;li&gt;</code> as a child is calling it?</p>
  
  <pre><code>$('.itemDelete').live("click", function() {
              var id = $(this).parent().get(0).id;
  
  
              $("#" + id).remove();
  
          });
  </code></pre>
  
  <p>What's the best approach?</p>