How can I delete an individual HTML element that does not have a class or ID?

Question

I am currently working with a theme that cannot be altered due to automatic update requirements. The theme includes the following HTML code snippet:

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

My goal is to hide the "Profile" link and the pipe character visually, without making any changes to the theme's underlying HTML structure.

Hiding the "Profile" link is straightforward:

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

However, I am seeking a solution for removing the pipe (|) character using CSS or JavaScript. Can you provide guidance on achieving this?

Answer 1

Answer №1

To achieve the desired result, simply apply the following styles:

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

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

For further guidance, please visit - http://jsfiddle.net/0p5L83zm/

Answer 2

To achieve the desired result, simply apply the following styles:

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

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

For further guidance, please visit - http://jsfiddle.net/0p5L83zm/

Answer 3

To change the content of an element using JavaScript, you can access its innerHTML property.

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

Check out this JSFiddle example: https://jsfiddle.net/abcdefgh/

Answer 4

To change the content of an element using JavaScript, you can access its innerHTML property.

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

Check out this JSFiddle example: https://jsfiddle.net/abcdefgh/

Answer 5

When working with jQuery, opt for the following code:

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

If you prefer using plain JavaScript:

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

Answer 6

When working with jQuery, opt for the following code:

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

If you prefer using plain JavaScript:

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