title: Removing a dynamically created li from ul
body: <p>I'm using jquery to add and remove bullets on the fly after the DOM is loaded.</p>
  
  <p>Here's the code to add a bullet which works fine:</p>
  
  <pre><code>// add bullet
  $('#linkedEventList ul').append('&lt;li id=' + datum._id + '&gt;' + datum.headline + ' &lt;a href=javascript:; title=delete onclick=remove(this) class=itemDelete&gt;(x)&lt;/a&gt; &lt;a href=/events/' + datum._id + '&gt;(open)&lt;/a&gt;&lt;/li&gt;');
  </code></pre>
  
  <p>Now here's the code to remove the clicked bullet, which works fine in Firefox, but does not work right in Chrome.  In Chrome, the hyperlink is removed and not the parent or li.</p>
  
  <pre><code>// remove bullet
  //$(link).closest('li').remove();
  $(link).parent().remove();
  </code></pre>
  
  <p>Either method above works fine in FireFox, but neither works in Chrome.  Any ideas on the solution?</p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/jjgelinas77/CsAJn/14/" rel="nofollow">http://jsfiddle.net/jjgelinas77/CsAJn/14/</a></p>