jquery - 入力フィールドへの入力開始時にdivを非表示にする - jQuery

Question

私はこのようなフォームを持っています

        <form id="form-send">
            <table class="form-table">
                <tbody>
                    <tr>
                        <td width="30%">First Name <span class="required">*</span></td>
                        <td width="70%">
                            <input type="text" id="first-name" value="" />
                            <div id="first-name-error-msg" class="error-box"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>Last Name<span class="required">*</span></td>
                        <td>
                            <input type="text" id="last-name" value="" />
                            <div id="last-name-error-msg" class="error-box"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>Address</td>
                        <td><input type="text" value="" /></td>
                    </tr>
                    <tr>
                        <td><button type="submit">Send</button></td>
                        <td><button type="reset">Reset</button></td>
                    </tr>
                </tbody>
            </table>
        </form>

フォーム入力を検証するために使用するスクリプトは次のようになります

        $(document).ready(function($) {
            $('#form-send').submit(function (){
                var error = 0;
                var name = $('#first-name').val();
                if (name == '') {
                    error = 1;
                    $('#first-name').addClass('error');
                    $('#first-name-error-msg').html(" - First name is required");
                    $('#first-name-error-msg').parent().show();
                }
                var name = $('#last-name').val();
                if (name == '') {
                    error = 1;
                    $('#last-name').addClass('error');
                    $('#last-name-error-msg').html(" - Last name is required");
                    $('#last-name-error-msg').parent().show();
                }
    if (error) {
        return false;
    } else {
        return alert("Email sent");
    }
            });
        });

フィールドに入力せずに送信ボタンを押すと、エラー メッセージが表示されます。私がやろうとしているのは、ユーザーが入力フィールドに再度入力し始めたときにエラーメッセージが表示された後、エラーメッセージ、メッセージを含むdivが消えるはずです。私はこのようなことを試しました

$('.error').keyup(function() {
    $('.error-box').hide('slow');
});

しかし、それはうまくいきません。誰かが私が間違っていることや、他にどのような方法を使用すべきかについてのヒントを教えてもらえますか?