jquery click an img hide an LI

Question

i have something similar to the following... used a python script to JSON to populate.

<ul>
<li id="p1" class="x">val1 <img id="ip1" class="redx" src="redx.gif"/></li>
<li id="p2" class="x">val2 <img id="ip2" class="redx" src="redx.gif"/></li>
<li id="p3" class="x">val3 <img id="ip3" class="redx" src="redx.gif"/></li>
<li id="p4" class="x">val4 <img id="ip4" class="redx" src="redx.gif"/></li>
</ul>

I'd like some jquery to... when click the red x image.. to hide the whole LI cell it is in.

I have tried a few things but ... to no avail.

EDIT: All in all.. this doesnt seem to trigger ... this seems like a fundamental issue.

$(function(){
    function removeli() {
      alert("got here" + this.id);
    }
    $("redx").click(removeli);
});

Any ideas on the final jquery code to accomplish this?

Answer 1

need a . prefix for classes

$('.redx').live('click', removeli);

---

updated code using live:

$(function() {
    $('.redx').live('click', function() {
        $(this).parent('li').hide(); // or .remove()
    });
});

using delegate (will only work if the <ul> doesn't change, only the <li>'s within it do):

$(function() {
    $('ul').delegate('img', 'click', function() {
        $(this).parent('li').hide();
    });
});

Answer 2

$(".redx").click(function(){
    $(this).parent().hide();
});