jquery add class on input click and remove class when click other input

Question

I need to add a class to the input wrapper when I click on input, and remove the class when other input is clicked.

I've tiyed toggleClass but it would only remove the class when the same input is clicked again.

I've tried to use functions: find() and closest() but cannot figure exactly which one I need, or in what order they shoudl be called... Any help would be appreciated.

So far here is the code:

<div class="wrapper">
    <label for="name" class="required">
        name
    </label>
    <div class="data_area">
        <input type="text" id="" name="" value="" title="" class="" />
    </div>
</div>

<div class="wrapper">
    <label for="other name" class="required">
        last name
    </label>
    <div class="data_area">
        <input type="text" id="" name="" value="" title="" class="" />
    </div>
</div>


<script>
    $('.wrapper input').click(function () {
        $(this).parent().addClass('red');
    });
</script>

<style>
.red {background:red;}
</style>

Answer 1

I think what you are looking for is focus/blur rather than click

$('.wrapper input').focus(function () {
    $(this).parent().addClass('red');
}).blur(function () {
    $(this).parent().removeClass('red');
});

Demo: Fiddle

If you still want click then try this