2015-07-11 3 views
3

У меня есть тема, которая не может быть изменена (из-за причин автоматического обновления). Следующий бит HTML существует в теме:Удалить один текстовый элемент html без класса или идентификатора?

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

мне нужно, чтобы скрыть ссылку «Профиль» и характер трубы, не изменяя темы HTML. (Чисто визуально)

Ссылка профиль является легким:

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

Но как я могу удалить трубу (|) символов с помощью CSS или JavaScript?

ответ

4

Вы можете достичь этого путем добавления следующих стилей

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

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

Для справки - http://jsfiddle.net/0p5L83zm/

+0

Приветствия за идею, я дал ему выстрел, и исходный, похоже, отлично работает. За исключением случая, когда я заменяю 'initial' на число, например 15px, элемент скрыт. Мне нужно сделать это, потому что, как мне кажется, исходный шрифт возвращает исходный размер шрифта. Я очень подозреваю, что это происходит только в моем специальном случае, потому что ваш jsfiddle работает нормально. Я тоже пробовал, важно, но не повезло. [edit] Нашел проблему, вы не можете больше указывать размер шрифта с помощью «em», когда я определяю размер шрифта с «px», он отлично работает! – TinusSky

+0

@TinusSky - Как вы сказали, изменение значения на 15px отлично работает в скрипке. Можете ли вы поделиться своим кодом или местом, где он не работает, чтобы я мог отлаживать дальше. – nikhil

+1

попробуйте использовать размер шрифта: 2em; в вашем jsfiddle текст «Выход» исчезает. Я использовал 2em в моем случае, но тестировал с 15px в вашем jsfiddle, не знал, что это может быть разница. Использование px работает без проблем. Я подозреваю, что em использует размер шрифта parent: размер шрифта 2 * 0 = 0, что имеет смысл. – TinusSky

2

Вы можете использовать JavaScript, чтобы управлять свойством innerHTML элемента. JavaScript:

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

Вот JSFiddle: https://jsfiddle.net/f7d81g4g/

+1

этот подход действительно будет работать! Кроме того, я бы использовал регулярное выражение и повторно использовал содержимое элемента. Приветствия за идею! – TinusSky

0

Если вы используете JQuery пойти

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

Если вы хотите Чистый JavaScript

document.getElementsByClassName('dropdown-menu').innerHtml = ""; 
Смежные вопросы