0

I don't have access to the HTML of a website I've been asked to work on but I can insert Javascript via a custom Javascript input box on the site builder tool.

<meta property="og:url" content="https://www.whyottawa.ca/speakers/jeff-jeffrey/">

I need to set an element to "display:none" if the line above from the <head> element includes the content, "https://www.whyottawa.ca/speakers/*" using * as a wildcard.

I've tried something like 

if (document.head.og:url.content === "https://www.whyottawa.ca/speakers/*") {
    document.getElementById('hide').style.display = "none";
};

but it doesn't like the ":" in the og:url property. Is there a way to escape this? Or a better syntax?

I also tried an attribute selector such as meta[content|="https://www.whyottawa.ca/speakers/"] but I got the error, 'ReferenceError: meta is not defined'

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Matthew Thornington
  • 47
  • 6
  • That element is already hidden, it is a meta tag. However you can remove it with javascript. If that is what you want – Amit Pandey May 29 '20 at 18:56
  • And about your script, you need to use a attribute selector for it.. simple dots won't work. – Amit Pandey May 29 '20 at 19:00
  • Thanks for your comment @AmitPandey I will Google attribute selectors. FYI the element I want to hide is not the meta tag, it's a div in the main body of the page. Just for this example let's suppose that it has an id of "hide". – Matthew Thornington May 29 '20 at 19:54

1 Answers1

0

In that case you can do this.

document.getElementById("hide").style.display="none";

Or you can use other selectors if you have some other attributes or queries.

document.querySelector("#hide").style.display="none";

Example for attribute selector Here name is the attribute name hiddenElement is the value.

document.querySelector("#hide[name='hiddenElement'").style.display="none";

For meta tag attribute selector

document.querySelector("meta[property='og:url']").getAttribute('content')
Amit Pandey
  • 274
  • 4
  • 16
  • I am answering this from mobile, so it may have some typos, let me know if something doesn't works. – Amit Pandey May 29 '20 at 20:12
  • This doesn't answer the question about how to change the value based on the information from a `meta` element. They already have the code to set the display style. – Heretic Monkey May 29 '20 at 20:21
  • Use the attribute selector on meta tag.. document.querySelector("meta[property='og:url']").getAttribute('content') – Amit Pandey May 29 '20 at 20:24
  • As @HereticMonkey said it's really the last part of your answer that is the one I need. That attribute selector works perfectly. Thanks – Matthew Thornington May 30 '20 at 02:18