Here is my HTML:

<td>
 <a class="button" href="#">
  <input id="download">...</input>
 </a>
 <a class="button" href="#">
  <input id="downloadcsv">...</input>
 </a>
</td>

Using CSS I want to hide the <a> which contains an input with the ID = downloadcsv

Is there a parent option in CSS?

Edit: As current aswers indicate you cant hide a parent element based on the class of one of its childeren.

Is it possible to do this simply in Javascript, rather than using a framework like jQuery?

Here is my HTML:

<td>
 <a class="button" href="#">
  <input id="download">...</input>
 </a>
 <a class="button" href="#">
  <input id="downloadcsv">...</input>
 </a>
</td>

Using CSS I want to hide the <a> which contains an input with the ID = downloadcsv

Is there a parent option in CSS?

Edit: As current aswers indicate you cant hide a parent element based on the class of one of its childeren.

Is it possible to do this simply in Javascript, rather than using a framework like jQuery?

• javascript
• css

3 Answers 3

Assuming the <a> is the direct parent of the downloadcsv-input, you can just use

document.getElementById("downloadcsv").parentNode.style.display = "none"

This is not possible with CSS (2). However, it is possible with jQuery.

To expand on Fran's answer, the jQuery solution would be this:

$("a:has(#downloadcsv)").hide();

Otherwise, you'll need to put a class on the parent <a> indicating that it is the parent of #downloadscv.