Is it possible to deactivate an element based on a specific string present in the URL?

 <div class="custom-class1">
    <div class="custom-class2" id="custom-id1">hello 1</div>
     <div class="custom-class3" id="custom-id2">hello 2</div>             
    <div class="custom-class4" id="custom-id3">hello 3</div>
  </div>

And I want to Deactivate/Conceal the Second [div] (id="custom-id2") , if the URL of the page includes the string ?specificpost.

For instance: if my webpage's URL is 

http://www.samplewebsite.com/article_1.html?specificpost
then the custom-id2 div should not be visible.

However, if the URL is simply 

http://www.samplewebsite.com/article_1.html
then the custom-id2 div should appear normally.

<script>
let target = document.getElementById("custom-id2");

if(window.location.href.includes("?specificpost")){
target.style.display = "none";
}
</script>

My JavaScript code isn't functioning as expected.

javascripthtmlcssbloggerblogspot

Answer №1

Here's an alternative suggestion

<script>
  const targetElement = document.getElementById("new-element-id");

  if(window.location.href.includes("?fullpost")){
     targetElement.parentNode.removeChild(targetElement);
  }
</script>

Answer №2

Upon execution, I noticed that the code interprets window.location.href.search("?fullpost") as a regular expression. To resolve this issue, it is essential to escape the '?' character.

<script>
let element = document.getElementById("test-id2");

if(window.location.href.search("/?fullpost") > -1){
element.parentNode.removeChild(element);
}
</script>

An alternative approach would be to utilize includes() method:

if(window.location.href.includes("?fullpost"))
{

Answer №3

I managed to resolve the issue by utilizing Regex in the following code snippet:

var element = document.getElementById("test-id2");
var reg = /(\?|\&)?fullpost/g;
var url = window.location.href;
if (reg.exec(url) !== null) {
    element.parentNode.removeChild(element);
}

You can find the complete snapshot of the page here.

The regular expression is designed to check for the presence of "fullpost" in the URL as a parameter, regardless of its position. For example, if your URL looked like this http://www.example.com/post_1.html?anything&fullpost, the code will successfully work.

Answer №4

It is recommended to utilize the indexOf() method rather than search()

let item = document.getElementById("example-id");
var siteUrl = window.location.href;
if(siteUrl.indexOf("?completepost") > -1) 
{ 
  item.parentNode.removeChild(item);
}

Answer №5

Make sure to add a listener on the element that will only prevent actions for a specific page.

let targetElement = document.getElementById("test-id2");
targetElement.addEventListener("click",(event) => {
   if(window.location.href.includes('?fulpost')){
     //ev.preventDefault(); // for <a></a>
     event.stopImmediatePropagation(); // This code prevents any click_event from executing
   }
},true);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to establishing a primary filter for my Json information with Angular.js?

After spending multiple days searching and reading, I am struggling to set an initial value for the data from a Rails JSON file in my application. The app focuses on incident tickets, and although I am able to retrieve all entries from the database using d ...

javascriptruby-on-railsjsonangularjs

In what way are these fonts being displayed through the utilization of a .js file?

Why are people opting for unique fonts on their browsers using .js files instead of graphics? For example, like typekit? ...

javascripthtmlcssfonts

Encase every picture within a div and add a numerical label in front of it

I'm working on a function that will wrap each image in a div and add a span label for each image. Here is the code I have written so far: $('#carousel img').each(function(index) { $(this).wrap('<div class="image"></div>& ...

jqueryhtmlimage

Visual Studio - TypeScript project synchronization issue

Currently using the 2015 version of Visual Studio Community, I am facing an issue while working on a typescript project. Whenever I make modifications to the code, debug it, and save it using ctrl + s followed by refreshing the browser with ctrl + r, the c ...

javascriptvisual-studiotypescript

What is the best way to extract individual objects from several arrays and consolidate them into a single array?

Currently, I have a collection of objects stored in a variable called listOfObjects. They are not separated by commas because I utilized the Object.entries method to extract these values from another array. console.log(listOfObjects) outputs { q: 'L ...

javascriptarraystype-conversionnested-object

Send the chosen item from the <b-form-select> element to the parent component through props

Using Vue.js, I have successfully created a form where all input fields pass their values except for the <b-form-select> element. How can I pass the value of the selected option in <b-form-select> to the parent component? Child Component: < ...

javascriptvue.jsaxiosbootstrap-vue

How can we eliminate the modal-open class in Angular when transitioning to a different URL?

Currently, I am facing an issue with a bootstrap modal. There is a button inside the modal which upon clicking should navigate the current component to another component named 'questions'. The problem arises when the new component is loaded, as t ...

javascriptjqueryangularbootstrap-4bootstrap-modal

What is the reason that (click) does not send my data within <button>, while (change) within <input> does in Angular and HTML?

I am facing an issue while trying to send data to my Glassfish RESTful server. The method is activated successfully when I use (change) inside the input tag, but it doesn't work when I try using (click) or (change) to activate the method. I attempted ...

htmlangulartypescripthttp

Utilizing a GET method with MongoDB

My front end has a link using axios with a placeID parameter: http://localhost:3001/api/getData?placeID=Uh8LPCRstLnJ-ZY3B41N9w I am trying to retrieve results based on the placeID in my database. I have made sure that there is data with the specific place ...

javascriptmongodbexpressmongoose

What is the best way to locate an element with the class name being an email address using jQuery?

Is it possible to locate an element with an email address as the class name, considering that the email address varies? $(document).ready(function(){ //not working getting error var email="<a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

javascriptjqueryhtmlclassname

JavaScript | Determining the coordinates of where on the image X and Y were clicked

My goal is to determine the position of an x and y location when a user clicks on an image. This information will be used to add a spot to the image that displays relevant information. The content for the spot will be dynamically loaded from a SQL database ...

javascriptjqueryhtmlcss

Finding the "img" id using jQuery

Here is the code snippet I am working with: <div id="popupContactIMG_4179" class="xxxx"> <a id="popupContactCloseIMG_4179">x</a> <img alt="" src="../IMG_4179.jpg" id="id1&q ...

jqueryhtmlcssjquery-plugins

Duplicate a DOM element and incorporate animation into it

After extensively researching articles and documentation on this topic, I have yet to find a solution that aligns with the approach I am attempting to implement. My scenario involves an array of category items which contain a nested array of products be ...

javascriptangulardom

Choose the grandparent of an element's parent

Is there a way to select the grandparent element of a child in Javascript without having to chain the .parentElement method twice? Specifically, I am looking for a method that can substitute .parentElement.parentElement when selecting the desired element, ...

javascripthtmlcss

Designing architecture for NPM packages in TypeScript

I am currently developing multiple NPM packages using TypeScript and I am exploring the most effective strategies for supporting various target architectures. When compiling to ES3, there is extensive support but it comes with additional boilerplate for c ...

javascripttypescriptnpmpackagecompatibility

What is the process for transforming a String into an HTML element within a Next JS Application?

I stored the product description as HTML elements in a Database, but when I try to render this data into a div, it displays as a String. I am looking to showcase all the data as HTML elements in my Next JS application. I attempted using JSON.parse, but unf ...

javascripthtmlnode.jsreactjsnext.js

What is the best way to load a local JSON file as the initial data source in Express and use it as an in

I'm in the process of creating a basic todo application using node.js express, and I've decided to work with an in-memory resource instead of utilizing a database. There's a local json file todo.json that contains some initial data which I ...

javascriptnode.jsjsonexpressasync-await

Creating tabbed content with a classless CSS design by utilizing radio buttons instead of the traditional unordered

I am attempting to transform the classless CSS and HTML provided below from a list format to using radio buttons and labels for tabbed content. My goal is to make it concise and avoid redundancy. Here is the setup of what I am aiming for: <nav> ...

htmlcss

Does Typescript not provide typecasting for webviews?

Typescript in my project does not recognize webviews. An example is: const webview = <webview> document.getElementById("foo"); An error is thrown saying "cannot find name 'webview'". How can I fix this issue? It works fine with just javas ...

javascripttypescriptwebviewelectron

What is the reason behind lightbox not disabling scrolling?

While using the default lightbox2 CSS and JavaScript, everything is functioning correctly except for an issue on Safari mobile. When I click an image and the lightbox opens, swiping to the left reveals blank white space despite having overflow-x set to hid ...

javascripthtmlcsslightboxlightbox2