How to find the parent element using javascript

Question

I want to change the background color of the table cell when radio button inside the cell is clicked.

<table>
  <tr>
    <td align="center">  
      <input type="radio" value="foo" 
        onclick="this.parentElement.style.background-color='red';" />
     </td>
  </tr>
</table>

How to get the parent element reference?

parentElement is a weird and totally pointless IE-only property. The spelling you are looking for is parentNode. — bobince
– bobince, Commented Mar 16, 2010 at 12:59
It would be more beneficial to post the real HTML output, not the Java-flavoured tags. h:selectOneRadio could quite easily get converted to some nested HTML tags and selecting the immediate parent wouldn't work. — DisgruntledGoat
– DisgruntledGoat, Commented Mar 16, 2010 at 13:00

Yuval Adam · Accepted Answer · 2010-03-16 12:41:40Z

129

Using plain javascript:

element.parentNode

In jQuery:

element.parent()

answered Mar 16, 2010 at 12:41

Yuval Adam

166k95 gold badges318 silver badges406 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Achaius Over a year ago

I tried like this but its not working <h:selectOneRadio value="#{book.price}" onclick="this.parent().css('background', '#FEDA46');">

Yuval Adam Over a year ago

this in your case must be a jQuery element. try $(this).

ryanulit · Accepted Answer · 2010-03-16 12:43:35Z

3

Use the change event of the select:

$('#my_select').change(function()
{
   $(this).parents('td').css('background', '#000000');
});

answered Mar 16, 2010 at 12:43

ryanulit

5,0116 gold badges46 silver badges66 bronze badges

Collectives™ on Stack Overflow

How to find the parent element using javascript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related