Looking for a solution:
<div id="body" role="main">
<h1>Title</h1>
<p>My site is mysite.com</p></div>
I always have
<div id="body" role="main"><h1>, and <p> tags on each page.
Is there a way to hide the text inside <h1> and <p> (i.e. "Title" and "My site is mysite.com") on specific URLs without affecting other pages?
If anyone knows how to achieve this using CSS or JavaScript, please advise.
Thank you!
If you want to conceal the immediate child elements of the body:
body > h1, body > p {
display: none;
}
Please inform me if this solution works for you.
To remove content, simply use .innerText = ''; method. Below is an example snippet for reference.
Update: If you want to apply the code only when the URI matches a specific value, you can do so by using this:
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>One way to hide an element using CSS is by utilizing the display property:
h1{
display: none;
}
To hide an element, you can apply the CSS property display: none;
#YOUR_ELEMENT_ID {
display: none;
}
#YOUR_ELEMENT_ID {
display: none;
}
If you want to hide the h1 and p elements on the /secret/ page, you can achieve this using JavaScript. Simply paste the following code snippet at the end of the /secret/ page:
<script>
var target = document.getElementById('body');
target.querySelector('p').style = 'display: none;';
target.querySelector('h1').style = 'display: none;';
</script>
Alternatively, if you need to apply this script to all pages but only execute it on /secret/, you can check the URI and then selectively hide the elements:
<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>
Personally, I have a preference for using classes over IDs in HTML.
<style>
.hide {
display: none;
}
</style>
When applying this to your HTML code:
<div id="body" role="main">
<h1 class="hide">Title</h1>
<p class="hide">Visit my website at mysite.com</p>
</div>
I hope you find this solution helpful.
If you are unable to modify the HTML and the elements you want to hide are always in position one and two within the body div, you can use the following CSS:
#body > h1:nth-child(1),
#body > p:nth-child(2) {
display: none;
}
To conceal text within a specific tag, you can apply the {display:none} style
H1-1Check out my website at mysite.com
h1{ display : none}
My project involves creating a mobile website with a simple interaction where clicking on a div opens another div underneath it. The HTML structure consists of two stacked divs, with the CSS for the bottom div initially set to 'none'. Using JavaS ...
I am attempting to retrieve data from an API. The desired result is being obtained, but when I attempt to log it to the console, it logs 4 times. Within my app.js, I am utilizing the fetchData function: import React, {useEffect, useState} from 'rea ...
Here is a snippet of code for a modal (from Twitter Bootstrap) that I am currently working with: <!-- Large Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large Modal</button&g ...
I am currently facing issues with my canvas displaying errors due to cached images causing CORS policy errors. The solution I am considering is adding crossorigin="anonymous" to all the images on my website. However, I am unsure of how to impleme ...
I am facing a challenge that I thought would be simple, but despite my efforts to research and experiment, I can't seem to get it right. I have a database that stores image file names, and I need to retrieve the file name based on the ID specified in ...
Trying to figure out if my problem is a stubborn bug, a support issue, or just a configuration mismatch has been quite the journey. I've spent so much time on this, not exactly thrilled to be reaching out for help. After searching for 3 days and only ...
Here is the code I have so far: <!DOCTYPE html> <html> <body> <button onclick="scanarray('a', 'max')">Test with a, max</button> <button onclick="scanarray('b', 'min')">Test with ...
To extract information from a .json file in node.js, the require function is used. I'm currently developing an Artificial Neural Network that utilizes this code to fetch data from the data.json file. const fs = require('fs'); const json = ...
I found this code on slick's website, but it's not working for me. Can anyone spot what I might be missing? http://codepen.io/anon/pen/pyEddO <html> <head> <title>My Awesome New Website</title> <link rel="styles ...
Is there a way to streamline nested subscriptions like the code snippet below? I want to extract values from the subscription for better organization, but using a global variable won't work because the subscription hasn't received the value yet. ...
Can anyone help with a small issue I'm having? When I click on button one, a modal popup appears but the overlay doesn't disappear when unloading. I've tried the code below, but can someone suggest what might be causing the problem? var po ...
I am currently working on a project that requires me to determine the total number of items in an HTML page based on a specified class. My tools of choice for this task are Selenium and Autohotkey. Despite extensive research on the topic, I have yet to fi ...
I recently customized an HTML block on my WordPress.com site and created a simple code snippet to function as a search widget. I've experimented with various approaches, such as attempting to trigger a script function with a button, making the functi ...
I am using a bxslider on my website with specific settings: $('#carousel').bxSlider({ slideWidth: 146, minSlides: 2, maxSlides: 6, speed:500, adaptiveHeight: true, moveSlides:3, infiniteLoop : false, hideContr ...
Currently, I am utilizing Monaca.mobi to develop a hybrid app. Interestingly, when I compile the app for IOS, everything runs smoothly; however, there seems to be an issue with audio playback on an android device (specifically Nexus 7). Strangely enough, i ...
My view-model includes a data grid similar to the one displayed below <table> @foreach (var item in Model) //for(int i=0;i<Model.Count();i++) { using (Html.BeginForm("Edi ...
How can I assign an event handler to an element created on the HTML5 Canvas without having to manually track specific coordinates? ...
Having a basic list presented in the django context. rlinks: ['test1', 'test2'', 'test3'] var v_root = new Vue({ delimiters: [ '[[', ']]' ], el: '#vue-main', data: { job ...
I have implemented a feature in my code where selecting an option from drop down one automatically updates drop down two. However, I now want to restrict users from manually editing drop down two. You can check out the live example here. var objArray = ...
While working on a Node.js application using Vash as the view engine in Visual Studio 2015 Update 3, I encountered an issue with syntax highlighting. When writing HTML in the vash files, the code appears as plain text without any syntax highlighting. For e ...