Hiding Google Translate bar

Question

I have the following code:

<div style="" class="skiptranslate">
  <iframe frameborder="0" style="visibility:visible" 
          src="javascript:''" 
          class="goog-te-banner-frame skiptranslate" 
          id=":2.container"></iframe>
</div>

I need to hide it but if I only hide the goog-te-banner-frame using:

.goog-te-banner-frame {
    display:none !important
    }

It still throws my header down. If I use this:

.skiptranslate {
    display:none !important
    }

It also hides the language selection dropdown because it shares the same class. I'd like to hide the skiptranslate div that CONTAINS the goog-te-banner-frame.

How do I do that?

Edit: This is actual code to "create" the translate div above:

<div id="google_translate_element"></div>
<script type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'en', 
        layout:     google.translate.TranslateElement.InlineLayout.SIMPLE,
        autoDisplay: false, 
        includedLanguages: ''}, 'google_translate_element');}
</script>
<script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Answer 1

Ok, this works for some reason:

.goog-te-banner-frame.skiptranslate {
    display: none !important;
    } 
body {
    top: 0px !important; 
    }

Answer 2

The selected answer is wrong!

I know this is an old question, but for anyone coming across this problem in the future, the easiest way:

body > .skiptranslate {
    display: none;
}

Since the iframes are dynamically added directly to the body, you can simply select only direct descendants and nothing deeper.