How do I hide a parent element using jquery?

Question

Suppose the following HTML:

   anchor



        

Answer 1

Can't you do this:

$(function() {
  $("a.foo").click(function() {
    $(this).parent().hide();
    return false;
  });
});

with:

<li class="fooli"><a class="foo" href="#">anchor</a></li>
<li class="fooli"><a class="foo" href="#">anchor</a></li>

Answer 2

$(...) in jQuery is never a single HTML element; it's always a list of them.

You can use .get() to convert to a regular Javascript list or, better, use .each():

$(anchor).each(function() { alert(this) });

This will give you something like [object HTMLAElement]. You'd have to use for/in to examine it entirely, but .tagName and .innerHTML are probably good enough to figure out where you are.

I also like to use $(...).css('outline', '1px solid lime') to find elements. It makes them hard to miss and easy to pinpoint with Firebug.

Addendum: I definitely agree with the above answer about separating your Javascript from your HTML. Don't inline JS.