Set <a> to display none

Question

Here is my HTML:

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

I need to set this CSS:

a.link {
  display: none;
}

But only to the <a> that contains the span with the class csvdownload

Ideally need to do this strictly with javascript not a plugin like jQuery...

Answer 1

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;
  }
}

You may need to test the textnode in FF

Answer 2

If you have control over the markup, this would be much better:

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

You already know that the <a> tags are "links" so adding that CSS class is redundant (replace any CSS rules using .link to simply use a). Then hide your links setting display:none on the .csvdownload class directly.

If you still need the "link" class to differentiate them from other anchors, you can simply have both classes:

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

Answer 3

To expand on the previous answer, you could also use:

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';
}

It's generally quicker to use the built in methods where possible.

Answer 4

Assuming you have no CSS rules attached to a.link that would impart width/height in the absence of content, simply setting display: none; to span.csvdownload should effectively achieve the same thing as hiding its parent element. You would not even need Javascript, just add it to your stylesheet.