How to hide content without element tag in html?

Question

In my project, I have a parent div and inside the parent div, I have three child elements. I want to hide all the child elements except for the first one. so I tried CSS and jquery kind of things, it's working fine but in the middle of that child element I have few strings(special characters) there (like this - ' | ', ' - '). those things are not hiding. any other ways to hide that element? CSS or JQuery?

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

.login_content > * {
    display: none;
}
.login_content > .welcome {
    display: flex;
}

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

this is my code, please help me to fix this.

Why didn't you wrap special characters (- '|', '-') in a tag? For example, in a `span`. — s.kuznetsov, Dec 11 '20 at 05:48
@sergey kuznetsov, actually I am using the Freshdesk ticker portal. so in there this data is coming. — Sankar S, Dec 11 '20 at 06:00
@swati thanks for your help. but in your URL those content just hide, but those place still present I mean DOM. I want those elements should not take any place in DOM. — Sankar S, Dec 11 '20 at 06:06
In your example, the String parts, or the Text Nodes, are not elements. So you cannot use a Child selector. — Twisty, Dec 11 '20 at 06:13

Minal Chauhan · Accepted Answer · 2020-12-11T06:16:54.803

1

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>

or using visibility value

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

.login_content {
  visibility: hidden;
}

.login_content > .welcome {
  visibility: visible;
}

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

edited Dec 11 '20 at 06:16

answered Dec 11 '20 at 05:41

Minal Chauhan

6,025
8
21
41

Thanks for your help. but your code hide that content only. not other contents. – Sankar S Dec 11 '20 at 05:44
please wrap special characters (- '|', '-') in span and hide using css – Minal Chauhan Dec 11 '20 at 05:56
actually I am using the Freshdesk ticker portal. so in there this data is coming. I cant able to edit those things. – Sankar S Dec 11 '20 at 06:01
I have updated my answer.. please check it – Minal Chauhan Dec 11 '20 at 06:04
I need without taking space from DOM. anyways to achieve that? – Sankar S Dec 11 '20 at 06:08
Minal, thank u so much. I think these tricks would be fine. font-size:0; should not take any space from DOM. – Sankar S Dec 11 '20 at 06:16

score 1 · Answer 2 · answered Dec 11 '20 at 06:26

You can try contains value. I think this working on only one tag.

<h1>Welcome to My Homepage</h1>

<p class="intro">My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>

Who is your favourite:
<ul id="choose">
  <li>Goofy</li>
  <li>Mickey</li>
  <li>Pluto</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p:contains(is)").css("background-color", "yellow");
});
</script>

This is W3school demo available Please check

score 0 · Answer 3 · answered Dec 11 '20 at 06:04

0

You can try the changing visibility value.

.login_content {
  visibility: hidden;
}

.login_content .welcome {
  visibility: visible;
}

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

Edit: A downside of this would be that the hidden elements will still take some space in DOM.

answered Dec 11 '20 at 06:04

Debsmita Paul

1,442
9
22

thank u so much. but I need without taking space from DOM. any other ways? – Sankar S Dec 11 '20 at 06:07
can you use jQuery in your project? Then the way I can think of is that you inject a wrapper around the `Agent Portal` and `Sign Out` and then add `display: none` to that wrapper. – Debsmita Paul Dec 11 '20 at 06:09
that's a good idea. but I have three children so how I can make a div around three? – Sankar S Dec 11 '20 at 06:12

How to hide content without element tag in html?

3 Answers3