Hide Text Node in Element, But Not Children

Hide text node in element, but not children

The visibility attribute can be overriden on children elements, so you are able to do this:

#closelink {
  visibility: collapse;
}

#closelink a {
  visibility: visible;
}

<div id="closelink">
  <a href="">Close</a> Click to close
</div>

How can I hide text content but not child elements?

A bit hacky but works

.a {
  font-size: 0px;
}
.a span {
  font-size: 1rem;
}

don't use visibility property, it makes the text invisible but does not remove it.

css hide text node but show its children

Here's a CSS-only example using text-indent to hide the text but keep elements inside visible. This doesn't require you to modify your HTML at all.

/* icon styles just for example: */
.icon {  background: green;  display: inline-block;  height: 15px;  width: 15px;  border-radius: 50%;}
/* hiding happens here: */
a {  display: block;  position: relative;  text-indent: -9999px;}
a > * {  position: absolute;  top: 0;  left: 0;  text-indent: 0;}

<ul>  <li>    <a href="#">      <span class="icon"><i class="fa fa-home"></i></span>      Dashboard    </a>  </li></ul>

CSS Selector to Hide Text Node But Not Other Child Elements

If you just intend to hide the text, do something like this

.hello {  font-size: 0;}
.mark {  font-size: 30px;}

<h2 class="hello">      This Text     <span class="mark">05/03/2017 3:29 PM EDT</span> </h2>

How to hide text content within an element but not hide child elements?

With CSS you can "hide" that text with font-size for example:

td {  font-size: 0;}td a {  font-size: 1rem;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table>  <tr>    <td>• <a href="">Link 1</a>    </td>    <td>• <a href="">Link 1</a>    </td>    <td>• <a href="">Link 1</a>    </td>  </tr></table>

How to hide content without element tag in html?

if you can't changes in html structure then You can try using font-size

jQuery(document).ready(function(){
  jQuery(".login_content").children().hide();
  jQuery('.welcome').show();
});

.login_content {
  font-size: 0;
}
.login_content > b {
    display: none;
}
.login_content > .welcome {
    display: flex;
    font-size: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="login_content">
  <div class="welcome">Welcome <b> name</b></div>
     <b><a href="/">Agent Portal</a></b> | 
     <b><a href="/">Edit profile</a></b> - 
     <b><a href="/logout">Sign out</a></b>
</div>

use css to hide unwrapped text node

visibility can be overwritten on children elements. So we can customize just the root text node:

p.entry-meta{ visibility: hidden; }
p.entry-meta time, p.entry-meta span.entry-comments-link { visibility:visible; }

The problem is that visibility still occupies space:

p.entry-meta{ visibility: hidden; }p.entry-meta time, p.entry-meta span.entry-comments-link { visibility:visible; }

<p class="entry-meta">  <time class="entry-time" itemprop="datePublished" datetime="2017-06-03T02:58:22+00:00">June 3, 2017</time> by <span class="entry-author" itemprop="author" itemscope="" itemtype="http://schema.org/Person"><a href="http://example.com/author/Albert/?customize_changeset_uuid=f30e84b8-4ed2-415a-9482-75fc161d62df&customize_messenger_channel=preview-0" class="entry-author-link" itemprop="url" rel="author" target="_self"><span class="entry-author-name" itemprop="name">Albert</span></a>  </span>  <span class="entry-comments-link"><a href="http://example.com/category/4-way-to-change-mac-engine/?customize_changeset_uuid=f30e84b8-4ed2-415a-9482-75fc161d62df&customize_messenger_channel=preview-0#respond" target="_self">Leave a Comment</a></span>  </p>

How do you remove text without affecting child elements?

Whit Javascript you can just get all the childNodes of the element with id=parent and then traverse these childs to .remove() those that have nodeType equal to Node.TEXT_NODE:

let childs = document.getElementById("parent").childNodes;childs.forEach(c => c.nodeType === Node.TEXT_NODE && c.remove());

<div id="parent">  <div>keep this</div>  <div>keep this</div>  Some random text that can't be predicted (to be removed)  <div>keep this</div></div>

Hide text in html which does not have any html tags

I would consider a CSS hack with font-size:

.entry {  font-size:0;}.entry * {  font-size:initial;}

<div class="entry"><p class="page-header" style="text-align: center;"><strong>Enter</strong></p><p>  somethin here</p>Enter (this will be hidden !!)<div class="subhead">another text here</div></div>

Hide or remove child elements and characters by CSS stylesheet

Since the <span> you want to address does not have any class name, you will need to style elements based on the DOM structure. This might be problematic, because then your script is sensible to any change.

You also can use Descendent combinator to address children of an element, or the more specific Child combinator

.eRhaXm span:nth-of-type(2) { display: none; }

Unfortunately, text nodes are not visible to CSS. But, since it is text, you can hide it differently, for example by setting font-size to 0, which you already did.

.eRhaXm { font-size: 0 }
.eRhaXm * { font-size: 1rem }

After all, all this is quite hacky and will break once the source DOM changes.

Also, it has accessibility issues, for example the aria-hidden attribute is completely hiding this name element from assistive technologies.

.eRhaXm {
      text-align: center !important;
      margin-left: 0px !important;
      font-size: 0px !important;
    }
    
.eRhaXm * { font-size: 1rem }
.eRhaXm span:nth-of-type(2) { display: none }

<div aria-hidden="true" class="styles__Name-sc-1dpp62d-1 eRhaXm">
<span>Kopi Help</span>   ·  
<span>Bot</span>
</div>

Hide Text Node in Element, But Not Children