Question

What I want to do is something like this:

$(".chat-wrapper").on("click", ".chat-wrapper li", function(){

$(this.name).hide();

});

the structure would be:

<ul class="chat-wrapper">
<li><img src=""/><a class="name">Name 1</a><div class="body"></div></li>
<li><img src=""/><a class="name">Name 2</a><div class="body"></div></li>
</ul>

so when you click on Name 2 it would hide that name class only. (my li element has more than 1 class inside, i want to be able to select which one I want)
(This is not the actual reason I need to do this, but it’s a simple example)

Answer 1

I’m still not sure what you’re asking, but it seems you have multiple <a>s inside an <li>, and want to the hide just the one that was clicked on.

Is this what you want?

$(".chat-wrapper").on("click", ".chat-wrapper li", function(e){
    $(e.target).hide(); // `e.target` is the child element (<a>) you clicked on.
                        // `this` would be the entire <li>, because that's
                        // what the event is bound to.
});

EDIT: To only hide elements with a specific class, you can do this:

$(".chat-wrapper").on("click", ".chat-wrapper li", function(){
    $('.name', this).hide(); // This is the same as $(this).find('.name')
                             // `this` is the <li> that was clicked on
});

DEMO: http://jsfiddle.net/LTPpJ/