How to hide

Question

I have a tag on my site that I want to remove. It seems that one of the features on my site is adding the tag. I was wondering if I could use CSS to remove the tag? The tag looks like this.

<p data-f-id="pbf" style="text-align: center; font-size: 14px; margin-top: 30px; opacity: 0.65; font-family: sans-serif;">…</p>

I am just not sure how to remove it because it doesn't have an ID or class.

Does this answer your question? [Select all elements with a "data-xxx" attribute without using jQuery](https://stackoverflow.com/questions/7084557/select-all-elements-with-a-data-xxx-attribute-without-using-jquery) — 0stone0, Nov 11 '21 at 14:25
@0stone0 I saw that post but I am honestly not familiar with javascript. That question specifically said they only wanted to use javascript — neuron, Nov 11 '21 at 14:28
Please share more details. Do you solely want to avoid it being displayed? Keep in mind that it will still be part of the markup, and everyone who has JS disabled will still see it. Also, any search engine will still crawl and index that content — Nico Haase, Nov 11 '21 at 14:52
@NicoHaase Everyone who has JS disabled would still be able to see it even if use CSS to hide it? — neuron, Nov 11 '21 at 14:56
It is still part of the markup, that's why I've asked for the reason to remove that data. If you simply want to hide it, knowing that this does not make it completely invisible for those who want to find it, you can use JS or CSS. If that is data that should **really** be kept secret, remove it server-side — Nico Haase, Nov 11 '21 at 15:14
@NicoHaase Thank you for your comments, they were very informative. The site requires a login and what I wanted to hide was visible after you log in. The only reason I wanted to hide it was because it just wasn't aesthetically pleasing. I wasn't trying to hide anything bad/important — neuron, Nov 11 '21 at 15:21

score 2 · Accepted Answer · answered Nov 11 '21 at 14:28

2

You can do it by CSS attr selector.
Please check CSS attr selector.

p[data-f-id="pbf"] {
  display: none !important;
}

<p data-f-id="pbf" style="text-align: center; font-size: 14px; margin-top: 30px; opacity: 0.65; font-family: sans-serif;">I won't appear.</p>

answered Nov 11 '21 at 14:28

Sato Takeru

1,092
1
5
16

1

This won't "remove" it, it's just **hidden**! – 0stone0 Nov 11 '21 at 14:30
If you want to delete this element, you can do it by javascript, not css. – Sato Takeru Nov 11 '21 at 14:30
@0stone0, removing element and hiding element shows the same result. – Sato Takeru Nov 11 '21 at 14:32
The questions asks about 'remove', not 'hide'. So you're answering a whole different question. Please elaborate, or mark as duplicate. Take a look at [answer] if you're not sure how to.. – 0stone0 Nov 11 '21 at 14:32
**No, no, no, no, no**, hiding a DOM element **is not the same as** removing a DOM element! – 0stone0 Nov 11 '21 at 14:33
Yes, of cause it's different, but I think the asker is looking for this result. People cannot see that element anymore. – Sato Takeru Nov 11 '21 at 14:36
@0stone0, In the title, he said he want to remove it from the website, not html code. – Sato Takeru Nov 11 '21 at 14:40
So my answer is correct answer for it. – Sato Takeru Nov 11 '21 at 14:40
@SatoTakeru Yes, this is a viable solution – neuron Nov 11 '21 at 14:42
1

@0stone0 I am not quite sure what the problem is here. You marked my question as a duplicate without reading my question closely. I did not ask about javascript. Your responses towards Sato are quite rude and unnecessary. I am sorry if my question wasn't clear enough. I am a bioinformatics scientist that was tasked to help with a website. – neuron Nov 11 '21 at 14:43
1

There's no difference in this case if you want to remove it from the website. Setting `visibility: hidden;` IS hiding it, but `display: none;` will remove effect of the element displaying, almost like it is being removed. The P element is not a script either, so it does not matter if you remove it or hide it. – Parking Master Nov 11 '21 at 14:45

score 2 · Answer 2 · edited Nov 11 '21 at 14:40

Just write this javascript in someplace on the web and done. This code will remove first p[data-f-id="pbf"] element.

document.querySelectorAll('p[data-f-id="pbf"]')[0].remove();

Or if you have more than one element you can remove all of them:

let pbfelements = document.querySelectorAll('p[data-f-id="pbf"]');

pbfelements.forEach(function(elem) {
   elem.remove();
});

remove() function Javascript

querySelectorAll() function Javascript

How to hide

2 Answers2