Clever Geek Handbook

Remove one html text element without class or id?

I have a theme that cannot be changed (due to auto-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 channel symbol without changing the html themes. (purely visual)

The profile link is simple:

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

But how can I remove the pipe (|) character using css or javascript?

+3


source to share


3 answers


This can be done by adding the 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/

+4


source


You can use JavaScript to control the innerHTML element 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/

+2


source


If you are using jQuery for

$(".dropdown-menu").empty();

If you want pure javascript

document.getElementsByClassName('dropdown-menu').innerHtml = "";
0


source






More articles:


All Articles