<p>I am using jQuery. I call a JavaScript function with next html:</p>

<pre><code>&lt;li&gt;&lt;span&gt;&lt;a href="javascript:uncheckEl('tagVO-$id')"&gt;$tagname&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
</code></pre>

<p>I would like to remove the <code>li</code> element and I thought this would be easy with the <code>$(this)</code> object. This is my JavaScript function:</p>

<pre><code>function uncheckEl(id) {
    $("#"+id+"").attr("checked","");
    $("#"+id+"").parent("li").css("color","black");                 
    $(this).parent("li").remove();  // This is not working
    retrieveItems();
}
</code></pre>

<p>But <code>$(this)</code> is undefined. Any ideas?</p>

[{'answer_id': 60449, 'author': 'Till', 'author_id': 2859, 'author_profile': 'https://Stackoverflow.com/users/2859', 'pm_score': 3, 'selected': True, 'text': '<p>Try something like this (e.g. to hide the <code>&lt;li&gt;</code>):</p>\n\n<pre><code>function unCheckEl(id, ref) {\n  (...)\n  $(ref).parent().parent().hide(); // this should be your &lt;li&gt;\n}\n</code></pre>\n\n<p>And your link:</p>\n\n<pre><code>&lt;a href="javascript:uncheckEl(\'tagVO-$id\', \\$(this))"&gt;\n</code></pre>\n\n<p><code>$(this)</code> is not present inside your function, because how is it supposed to know where the action is called from? You pass no reference in it, so <code>$(this)</code> could refer to everything but the <code>&lt;a&gt;</code>.</p>\n'}, {'answer_id': 74712, 'author': 'Parand', 'author_id': 13055, 'author_profile': 'https://Stackoverflow.com/users/13055', 'pm_score': 1, 'selected': False, 'text': '<p>Why not something like:</p>\n\n<pre><code>&lt;li id="uncheck_tagVO-$id"&gt;$tagname&lt;/li&gt;\n</code></pre>\n\n<p>and</p>\n\n<pre><code>$(\'li\').click( function() {\n    var id = this.id.split("_")[1];\n    $(\'#\'+id).attr("checked","").parent("li").css("color","black"); \n    $(this).remove();\n    retrieveItems();\n});\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/60438', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2138/']