<div class="padd10_m">
<a href="/" class="grid_view_url_thing1">admin</a> 
US <img src=".png">                
</div>

In the above code I want to hide "US" word. I hide that image after US but unable to find the way to hide this "US" word. what could be the code to hide it?

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

In the above code I want to hide "US" word. I hide that image after US but unable to find the way to hide this "US" word. what could be the code to hide it?

• javascript
• html
• css
• wordpress

• Can't you just delete the word "US"? – RasmusGlenvig Commented Sep 27, 2016 at 7:19
• You can't address it so you can't hide it. – aavrug Commented Sep 27, 2016 at 7:20
• I wish if I could do that so easily. All i have is wordpress access, no cpanel. – Rasika Commented Sep 27, 2016 at 7:20
• add a tag around it. If you need to exert control on some portion of content, this portion has to be reflected in document structure. Otherwise, it has no particular attributes to work with. – Vladimir M Commented Sep 27, 2016 at 7:21
• Could be accessed using document.querySelector('.padd10_m').childNodes – Rayon Commented Sep 27, 2016 at 7:21

7 Answers 7

Something like this?

.padd10_m {
  font-size: 0px;
}
.padd10_m > * {
  font-size: 14px;
  /* Apply normal font again */
}

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

Working fiddle

Or

If you want to go with JavaScript (I don't see why though), Here is the solution:

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./job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> US
  <img src="http://www.caviarandfriends./job_board/wp-content/themes/PricerrTheme/images/flags/us.png">
</div>

Use css:

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

Try to hide with font-size

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

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

Adding :after, you can add a space between admin and the flag.

.padd10_m{
  font-size: 0px;
}

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

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

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

Boom

You can move the image (US-Flag) over the Text:

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

In addition you can set the font color at same as background color.

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

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

Update: I didn't realized that the image also should be hidden. Here another solution:

.padd10_m {
  width: 40px;
  overflow: hidden;
  white-space: nowrap;
}

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