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

Share Improve this question Follow edited Jun 29, 2010 at 21:00 CLiown asked Jun 29, 2010 at 16:12 CLiownCLiown 13.9k5050 gold badges127127 silver badges205205 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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.