How to hide text that has no tags, no identifier, no class?

Question

I have this HTML:

<div id="google_translate_element">
    <div class="skiptranslate goog-te-gadget" dir="ltr">
        <div id=":0.targetLanguage">
            <select class="goog-te-combo">
                <option value="">Sélectionner une langue</option>
                <option value="en">Anglais</option>
                <option value="es">Espagnol</option>
                <option value="it">Italien</option>
            </select>
        </div>
        Fourni par&nbsp;<span style="white-space:nowrap">
        <a class="goog-logo-link" href="https://translate.google.com" target="_blank">
            <img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" width="37px" height="14px" style="padding-right: 3px">Traduction</a>
        </span>
    </div>
</div>

My goal is to hide "Fourni par": the problem is that it is not marked, does not contain certain classes or identifier?

Answer 1

JQuery solution:

You can filter the text with nodeTypeand delete the text:

$('.skiptranslate.goog-te-gadget').contents().filter(function(){
    return this.nodeType == 3
}).remove();

$('.skiptranslate.goog-te-gadget').contents().filter(function(){
    return this.nodeType == 3
}).remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="google_translate_element">
  <div class="skiptranslate goog-te-gadget" dir="ltr">
    <div id=":0.targetLanguage">
      <select class="goog-te-combo">
        <option value="">Sélectionner une langue</option>
        <option value="en">Anglais</option>
        <option value="es">Espagnol</option>
        <option value="it">Italien</option>
      </select>
    </div>
    Fourni par&nbsp;<span style="white-space:nowrap">
    <a class="goog-logo-link" href="https://translate.google.com" target="_blank">
      <img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" width="37px" height="14px" style="padding-right: 3px">Traduction</a>
    </span>
  </div>
</div>

Run code

CSS solution:

You can use the attribute visibilityto collapse the text and allow div and link visible:

.skiptranslate.goog-te-gadget {
    visibility:collapse;
}

.skiptranslate.goog-te-gadget div,.skiptranslate.goog-te-gadget a{
    visibility:visible;
}

<div id="google_translate_element">
  <div class="skiptranslate goog-te-gadget" dir="ltr">
    <div id=":0.targetLanguage">
      <select class="goog-te-combo">
        <option value="">Sélectionner une langue</option>
        <option value="en">Anglais</option>
        <option value="es">Espagnol</option>
        <option value="it">Italien</option>
      </select>
    </div>
    Fourni par&nbsp;<span style="white-space:nowrap">
    <a class="goog-logo-link" href="https://translate.google.com" target="_blank">
      <img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" width="37px" height="14px" style="padding-right: 3px">Traduction</a>
    </span>
  </div>
</div>

Run code

Hope this helps.

Answer 2

If you want to do this with css only, you can also use font-size:

.skiptranslate {
    font-size: 0;
}
.skiptranslate > span, .skiptranslate > div {
    font-size: 14px; /* Or whatever you want*/
}

<div id="google_translate_element">
    <div class="skiptranslate goog-te-gadget" dir="ltr">
        <div id=":0.targetLanguage">
            <select class="goog-te-combo">
                <option value="">Sélectionner une langue</option>
                <option value="en">Anglais</option>
                <option value="es">Espagnol</option>
                <option value="it">Italien</option>
            </select>
        </div>
        Fourni par&nbsp;<span style="white-space:nowrap">
        <a class="goog-logo-link" href="https://translate.google.com" target="_blank">
            <img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" width="37px" height="14px" style="padding-right: 3px">Traduction</a>
        </span>
    </div>
</div>

Run code