¿Cómo ocultar el texto que no está dentro de la etiqueta HTML?

4 minutos de lectura

avatar de usuario
Rasika

<div class="padd10_m">
<a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> 
US <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">                
</div>

En el código anterior, quiero ocultar la palabra “EE. UU.”. Oculto esa imagen después de US pero no puedo encontrar la manera de ocultar esta palabra “US”. ¿Cuál podría ser el código para ocultarlo?

  • ¿No puedes simplemente borrar la palabra “US”?

    – RasmusGlenvig

    27 de septiembre de 2016 a las 7:19

  • No puedes abordarlo, así que no puedes ocultarlo.

    – aavrug

    27 de septiembre de 2016 a las 7:20

  • Ojalá pudiera hacerlo tan fácilmente. Todo lo que tengo es acceso a wordpress, sin cpanel.

    – Rasika

    27 de septiembre de 2016 a las 7:20

  • agrega una etiqueta alrededor. Si necesita ejercer control sobre alguna parte del contenido, esta parte debe reflejarse en la estructura del documento. De lo contrario, no tiene atributos particulares con los que trabajar.

    – Vladímir M.

    27 de septiembre de 2016 a las 7:21

  • Se puede acceder usando document.querySelector('.padd10_m').childNodes

    – Rayón

    27 de septiembre de 2016 a las 7:21

avatar de usuario
SR verde

¿Algo como esto?

.padd10_m {
  font-size: 0px;
}
.padd10_m > * {
  font-size: 14px;
  /* Apply normal font again */
}
<div class="padd10_m">
  <a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> US
  <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">
</div>

violín de trabajo

O

Si quieres ir con JavaScript (aunque no veo por qué), Aquí está la solución:

var pad = document.querySelector('.padd10_m');
Array.prototype.forEach.call(pad.childNodes, function(el) {
  if (el.nodeType === 3) {   // check if it is text node
    pad.removeChild(el);     // remove the text node
  }
});
<div class="padd10_m">
  <a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> US
  <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">
</div>

avatar de usuario
Quy Truong

Usa CSS:

.padd10_m { font-size: 0; }
.padd10_m * { font-size: 1rem;}

  • Genial también… me parece algo nuevo. ¿Esto * funcionará?

    – Rasika

    27 de septiembre de 2016 a las 7:34


  • creo que debería Significa aplicar el tamaño de fuente de a todos los niños de esa clase.

    – Quy Truong

    27 de septiembre de 2016 a las 7:36

Trate de esconderse con font-size

.padd10_m{font-size:0;}
.padd10_m > a{font-size:16px;}
<div class="padd10_m">
  <a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> US
  <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">
</div>

CSS

   .padd10_m {
    font-size:0px;
    }

    .padd10_m a{
    font-size:14px;
    }

HTML

<div class="padd10_m">
<a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> 
US <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">                
</div>

Agregando: después, puede agregar un espacio entre admin y la bandera.

.padd10_m{
  font-size: 0px;
}

.padd10_m a{
  font-size: 16px;
}

.padd10_m a:after{
  content: ' ';
}

avatar de usuario
jeremykenedy

<script type="text/javascript">
    document.body.innerHTML = document.body.innerHTML.replace(/US <img/g, '<img');
</script>

Auge

Puede mover la imagen (bandera de EE. UU.) sobre el texto:

.padd10_m img {
    margin: 0 0 -7px -25px;
    border: 5px solid #fff;
}

Además, puede establecer el color de fuente al mismo que el color de fondo.

img {
    margin: 0 0 -7px -25px;
    border: 5px solid #fff;
  }
<div class="padd10_m">
<a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> 
US <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">                
</div>

Actualizar: No me di cuenta de que la imagen también debería estar oculta. Aquí otra solución:

.padd10_m {
  width: 40px;
  overflow: hidden;
  white-space: nowrap;
}
<div class="padd10_m">
<a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> 
US <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">                
</div>

  • Gracias Andy, pero tampoco quiero esa bandera. :PAGS

    – Rasika

    27 de septiembre de 2016 a las 7:35

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad