access $(this) with href="javascript:..." in JQuery

Question

I am using JQuery. I call a javascript function with next html:

<li><span><a href="javascript:uncheckEl('tagVO-$id')">$tagname</a></span></li>

I would like to remove the li element and i thought this would be easy with the $(this) object. This is my javascript function:

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

But $(this) is undefined. Any ideas?

Answer 1

Try something like this (e.g. to hide the <li>):

function unCheckEl(id, ref) {
  (...)
  $(ref).parent().parent().hide(); // this should be your <li>
}

And your link:

<a href="javascript:uncheckEl('tagVO-$id', \$(this))">

$(this) 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 $(this) could refer to everything but the <a>.

Answer 2

Why not something like:

<li id="uncheck_tagVO-$id">$tagname</li>

and

$('li').click( function() {
    var id = this.id.split("_")[1];
    $('#'+id).attr("checked","").parent("li").css("color","black"); 
    $(this).remove();
    retrieveItems();
});