How to apply css to an HTML item with no selector

Question

I have a wordpress website where I need to remove an element from the form.

This is how the element "|" looks like:

And this is what it looks like on inspecting it with chrome developer tool. : I cannot add any selector on it, because I don't control how it is rendered. but I need to get rid of it.

It's better to remove it via your Wordpress form generator tool, it would be very complicated/error-prone code to hide text node — Justinas, Sep 13 '19 at 14:19
That is a text node, so you are going to struggle here. You can not directly select a text node with CSS. There are few ideas discussed in this thread: https://stackoverflow.com/questions/15196630/hide-text-node-in-element-but-not-children — Turnip, Sep 13 '19 at 14:19
this looks like plain text within a div. You are right in saying that you can't select this. You need to iterate through childNodes, find the content, and then do parent.removeChild(node) — ControlAltDel, Sep 13 '19 at 14:20

mplungjan · Accepted Answer · 2019-09-13T14:34:49.080

3

Like this?

const a = document.querySelector("a[id^=cred]");
const sib = a.nextSibling;
if (/\s+|\s+/.test(sib.nodeValue)) sib.nodeValue = " "; // a.parentNode.replaceChild(document.createTextNode(" - "), sib);

<div class="toolset-google">
  <a id="credbla">Something</a>
    |
  <a class="toolset-google">something else</bla>
</div>

edited Sep 13 '19 at 14:34

answered Sep 13 '19 at 14:27

mplungjan

169,008
28
173
236

How to apply css to an HTML item with no selector

1 Answers1