Stack Overflow
Stack Overflow
Asked
Active
Viewed 2,714 times
-1

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

bdkopen
  • 494
  • 1
  • 6
  • 16
miko
  • 1
  • 1
  • 3
  • 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 Jul 22 '17 at 15:08
  • Do you want to keep tags `

    ` and `

    ` and just remove the inner text?     – P.S. Jul 22 '17 at 15:08
  • 1
    @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 Jul 22 '17 at 15:11
  • @Michael Coker - yes – miko Jul 22 '17 at 15:17
  • @Commercial Suicide - YES – miko Jul 22 '17 at 15:24
  • I think @MatthewChristopher's idea is good. Just define a `.hidden { display: none; }` class and add it to the `h1` and `p`, although that involves modifying your html, too - not just css/js. Will that work? – Michael Coker Jul 22 '17 at 15:28
  • Oh. Hmm, after reading your edited question, what I would do is add a unique class to `body` like (`.hideStuff`) on "specific URLs" and use `.hideStuff #body h1, .hideStuff #body p { display: none; }` - how about that? – Michael Coker Jul 22 '17 at 15:29
  • @Michael Coker - I am just want to remove the inner text on

    and

    in specific URL like "thesite.com/secret" only?     – miko Jul 22 '17 at 15:37
  • @Michael Coker - I am not able to add class, if I am add style that is will efect to all tag in all page. – miko Jul 22 '17 at 15:44

7 Answers7

1

You can hide immediate child element's of body:

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

Le me know if it works for you.

ali
  • 557
  • 2
  • 13
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>
Munawir
  • 3,346
  • 9
  • 33
  • 51
  • that code will efect to all page? – miko Jul 22 '17 at 15:42
  • 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 – Munawir Jul 22 '17 at 15:43
  • 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"? – miko Jul 22 '17 at 15:47
  • Why can't you edit the "thesite.com/secret" page and place the script ? – Munawir Jul 22 '17 at 15:48
  • Don't place the script inside a `.js` file which loaded for every page. Place it inside html page between and – Munawir Jul 22 '17 at 15:52
  • I just have permission to add css or js and not able to modify the page. If I am add css or js, the code will load on every page. – miko Jul 22 '17 at 15:53
  • @miko Updated. Check now – Munawir Jul 22 '17 at 15:58
  • If you want to apply for multiple pages, you can code like `if (uri == 'secret' || uri == 'page2' || uri == 'page3')` – Munawir Jul 22 '17 at 15:59
  • I have add the code in but not work? what the wrong? – miko Jul 22 '17 at 16:12
0

You can use the Css display property like this : 

h1{
   display : none;
}
Sabelo Ndebele
  • 1
  • 2
0

You can use display: none;

#YOUR_ELEMENT_ID {
   display: none;
}
#YOUR_ELEMENT_ID {
   display: none;
}
JakeBoggs
  • 274
  • 4
  • 17
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;
}
J. Langer
  • 262
  • 3
  • 17
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>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
0

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

H1-1

My site is mysite.com

h1{ display : none}

Lokesh Verma
  • 51
  • 5