Установите <a>, чтобы ничего не отображать

Question

Вот мой HTML:

<td>
  <a class="link" href="#">
   <span class="download">Link</span>
  </a>
  <a class="link" href="#">
    <span class="csvdownload">Link 2</span>
  </a>
</td>

Мне нужно установить этот CSS:

a.link {
  display: none;
}

Но только для <a>, который содержит диапазон с классом csvdownload

В идеале нужно делать это строго с JavaScript, а не с плагином, как jQuery ...

Answer 1

Если у вас есть контроль над разметкой, это будет намного лучше:

<td>
  <a class="download" href="#">Link</a>
  <a class="csvdownload" href="#">Link 2</a>
</td>

Вы уже знаете, что теги <a> являются "ссылками", поэтому добавьте, что класс CSS является избыточным (замените любой CSSправила, использующие .link, чтобы просто использовать a).Затем скройте настройки ссылок display:none непосредственно в классе .csvdownload.

Если вам все еще нужен класс "link", чтобы отличать их от других якорей, вы можете просто использовать оба класса:

<td>
  <a class="link download" href="#">Link</a>
  <a class="link csvdownload" href="#">Link 2</a>
</td>

Answer 2

var spans = document.getElementsByTagName('span');
for (var i=0,n=spans.length;i<n;i++) {
  if (spans[i].className=="csvdownload") {
    spans[i].parentNode.style.display='none';
    break;
  }
}

Возможно, вам понадобится проверить текстовый узел в FF

Answer 3

Если у вас нет CSS-правил, прикрепленных к a.link, которые бы передавали ширину / высоту в отсутствие содержимого, просто установив display: none; в span.csvdownload, вы получите то же самое, что скрыть родительский элемент. Вам даже не понадобится Javascript, просто добавьте его в таблицу стилей.

Answer 4

Чтобы расширить предыдущий ответ, вы также можете использовать:

var byClass = document.getElementsByClassName,
    el;
if (byClass) {
    el = byClass('cvsdownload');
} else {
    var spans = document.getElementsByTagName('span');
    for (var i = 0, n = spans.length; i < n; i++) {
        if (spans[i].className == "csvdownload") {
            el = spans[i];
            break;
        }
    }
}
if (el) {
    el.parentNode.style.display = 'none';
}

Как правило, по возможности быстрее использовать встроенные методы.