How to hide a text with css or js? [duplicate]

Question

I have this html

<div id="body" role="main">
    <h1>Title</h1>
<p>My site is mysite.com</p></div>

I have <div id="body" role="main"> or <h1> and <p> on every page.

I want to hide inner text of <h1> and <p> or "Title" and "My site is mysite.com" on specific URLs without effecting <div id="body" role="main"> or <h1> and <p> on other pages.

Please help me to hide them with css or js?

Thanks

not sure what you mean. You want to hide those elements using CSS or JS without referencing div, role or id on #body and without referencing h1 or p in your css/js selectors? — Michael Coker
– Michael Coker, Commented Jul 22, 2017 at 15:08
Do you want to keep tags <h1></h1> and <p></p> and just remove the inner text? — P.S.
– P.S., Commented Jul 22, 2017 at 15:08
@miko Would it be fine for you to add a "hidden" class to do this? If so I believe we can help. Unless you use JavaScript/jQuery, there's no other way unless using a class of some sort. You could also add it in inline styling but your question doesn't completely make sense. Please clarify further. — sdr981
– sdr981, Commented Jul 22, 2017 at 15:11

ali · Accepted Answer · 2017-07-22 15:27:24Z

1

You can hide immediate child element's of body:

body > h1, body > p {
   display: none;
}

Le me know if it works for you.

answered Jul 22, 2017 at 15:27

ali

5672 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Munawir · Accepted Answer · 2017-07-22 15:58:14Z

1

Just use .innerText = ''; to set empty content. Check the snippet below.

Update : To check the URI and only apply if it matches, use

var uri = window.location.pathname.substr(1).replace('/', '');
if (uri == 'secret') {
    var div = document.getElementById('body');
    div.getElementsByTagName('h1')[0].innerText = '';
    div.getElementsByTagName('p')[0].innerText = '';
}

var div = document.getElementById('body');
div.getElementsByTagName('h1')[0].innerText = '';
div.getElementsByTagName('p')[0].innerText = '';

<div id="body" role="main">
    <h1>Title</h1>
<p>My site is mysite.com</p></div>

edited Jul 22, 2017 at 15:58

answered Jul 22, 2017 at 15:34

Munawir

3,3569 gold badges36 silver badges51 bronze badges

9 Comments

miko Over a year ago

that code will efect to all page?

Munawir Over a year ago

It depends on where you place the code. If need to hide text only on specific pages, place the above code only on the pages where you need to hide the text

miko Over a year ago

If I am add css or js, the code will load on every page, I want the code just efect in specific URL only like "thesite.com/secret"?

Munawir Over a year ago

Why can't you edit the "thesite.com/secret" page and place the script ?

Munawir Over a year ago

Don't place the script inside a .js file which loaded for every page. Place it inside html page between <head> and </head>

|

Sabelo Ndebele · Accepted Answer · 2017-07-22 15:08:14Z

0

You can use the Css display property like this :

h1{
   display : none;
}

answered Jul 22, 2017 at 15:08

Sabelo Ndebele

12 bronze badges

1 Comment

miko Over a year ago

That code will hide all <h1> in all page!

Jake Boggs · Accepted Answer · 2017-07-22 15:25:37Z

0

You can use display: none;

#YOUR_ELEMENT_ID {
   display: none;
}
#YOUR_ELEMENT_ID {
   display: none;
}

edited Jul 22, 2017 at 15:25

answered Jul 22, 2017 at 15:08

Jake Boggs

2744 silver badges18 bronze badges

1 Comment

miko Over a year ago

I am don't have permission to modify <h1> and <p> but I am can add css or js.

Michael Coker · Accepted Answer · 2017-07-22 15:49:21Z

0

To remove the h1 and p from the display on /secret/ you can use javascript. Just add this to the bottom of of /secret/.

<script>
            var target = document.getElementById('body');
            target.querySelector('p').style = 'display: none;';
            target.querySelector('h1').style = 'display: none;';
</script>

Or if you have to add JS to all of your pages, you can check the URI and only apply if it matches /secret/

<script>
        var uri = window.location.pathname.substr(1).replace('/', '');
        if (uri == 'secret') {
            var target = document.getElementById('body');
            target.querySelector('p').style = 'display: none;';
            target.querySelector('h1').style = 'display: none;';
        }
</script>

answered Jul 22, 2017 at 15:49

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

9 Comments

miko Over a year ago

I am have add in all page in <head> but not work? I use "check the URI".

Michael Coker Over a year ago

@miko can you add the script to the bottom of the page instead?

Michael Coker Over a year ago

@miko this question covers why it isn't working - the first solution has a bunch of methods stackoverflow.com/questions/14028959/…

miko Over a year ago

I am add in above </body> tag, work but just in <h1> first tag not work in other <h1> or <p> tag in same page?

Michael Coker Over a year ago

@miko are you defining #body in multiple places on the page?

|

J. Langer · Accepted Answer · 2017-07-22 15:53:27Z

0

i don´t like id so i prefer class.

<style>
.hide {
  display: none;
}
</style>

So your html:

<div id="body" role="main">
  <h1 class="hide">Title</h1>
  <p class="hide">My site is mysite.com</p>
</div>

Hope this will help.

If you can´t change the html class or id and both elements are always at position one and two then use this.

#body > h1:nth-child(1),
#body > p:nth-child(2) {
  display: none;
}

edited Jul 22, 2017 at 15:53

answered Jul 22, 2017 at 15:47

J. Langer

3403 silver badges21 bronze badges

Comments

Lokesh Verma · Accepted Answer · 2017-07-22 19:13:44Z

0

You can use {display:none} style for hide text for a particular tag

H1-1

My site is mysite.com

h1{ display : none}

answered Jul 22, 2017 at 19:13

Lokesh Verma

515 bronze badges

Collectives™ on Stack Overflow

How to hide a text with css or js? [duplicate]

7 Answers 7

Comments

9 Comments

1 Comment

1 Comment

9 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

9 Comments

1 Comment

1 Comment

9 Comments

Comments

Comments

Linked

Related