Hide mailchimp embed form only when submitting successfully

I have an embed Mailchimp form on my site.

I managed to make it hide when you click the subscribe button, with this:

<script>
    $(function(){
        $(".mc-btn").on("click", function(){
            if ( $('#mce-success-response:visible') ) {
                console.log('Successfully signed up');
                    $('#mc-embedded-subscribe-form').hide();
           else {
              console.log('Not successfull')
            }
                    
           }
        });
    }); 
</script>

But it does it even if there is error messages.

I have tried:

if($('#mce-success-response').css('display') == 'block')

It does not work at all.

When the success message is visible it looks like this:

<div class="response" id="mce-success-response" style="display: block;">*Success message*</div>

How do i check correctly if the success message is visible?