Question

I have an LI that contains a form, on form submit I want to fade out the parent LI, I’ve been trying with no luck, I’ve also made a fiddle in basic form, can anybody give me an idea on how its done?

http://jsfiddle.net/uAZ5Z/

<li>
<form>
    <input type='submit' value='delete'>
</form>
</li>

jQ:

 $('input').click(
     $(this).fadeOut();
 )

Answer 1

Try this instead:

$('input').click(function() {
    $(this).closest('li').fadeOut();
});
​

You have two errors in your code:

1. There must be a call to a function (anonymous or not) inside $.click().
2. $(this) in this context references the <input> element. To reference it’s closest <li>, you need to use $.closest() instead. Note that you shouldn’t use $.parent(), because it only get the direct parent of the element.

---

To make any <li> elements underneath the current one, instead of just doing $.fadeOut(), do this instead:

$('input').click(function() {
    $(this).closest('li').slideUp();
});

Which will animate the element’s height to 0, “sliding” it up.