Remove a single text html element without class or id?

Question

I have a theme which can't be changed (because of automatic update reasons). The following bit of html exists in the theme:

<div class="dropdown-menu">
<a href="#">Profile</a> | <a href="#">Logout</a>
</div>

I need to hide the "Profile" link and the pipe character, without modifying the themes html. (purely visual)

The profile link is an easy one:

.dropdown-profile a:first-of-type{
display: none;
}

But how can i remove the pipe (|) character with css or javascript?

Answer 1

You can achieve this by adding following styles

.dropdown-menu {
    font-size : 0;
}

.dropdown-menu a:last-of-type{
    font-size: initial; // or some other value
}

For reference - http://jsfiddle.net/0p5L83zm/

Answer 2

You can use JavaScript to manipulate the element's innerHTML property. JavaScript:

foo = document.getElementsByClassName('dropdown-menu');
foo = foo.item(0);
foo.innerHTML = "<a href='#'>Profile</a> <a href='#'>Logout</a>";

Here's a JSFiddle: https://jsfiddle.net/f7d81g4g/