Question

我有那个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>

我的目标是隐藏'Fourni par'：问题是：它没有标记，没有特定的类或id？

Answer 1

jQuery解决方案：

您可以使用nodeType过滤文字并删除文字：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

CSS解决方案：

您可以使用visibility属性折叠文字并让div和链接visible：

＆＃13;

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

＆＃13;

<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>

＆＃13;

希望这有帮助。

Answer 2

如果您只想使用css执行此操作，还可以使用font-size：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何隐藏没有标签，没有id，没有类的文本？

2 个答案: