1

I have 4 links which place under seperate <td>, I want to show/hide the td based on a particular selection of parent object

<td nowrap align=right id="dis_mirr" style="visiblility: visible;">
    <a id="first" style=font-weight:normal href=javascript:createwin();>
        &nbsp;Mirror&nbsp;
    </a>
</td>
<td nowrap align=right>
    <a id="second" style=font-weight:normal href=javascript:breakwin();>
        &nbsp;Break Mirror
    </a>
</td>

here is code:

if(record.get('model') == 'top'){
    document.getElementById('first').visibility = "hidden";
}else{
    document.getElementById('first').visibility = "visible";
}

The code works but the <td> is still there it should be removed when I hide it.

Py.
  • 3,499
  • 1
  • 34
  • 53
Hemant
  • 127
  • 5
  • 15
  • 1
    See http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone for the difference between `display` and `visibility`. – Barmar Aug 22 '12 at 09:12

2 Answers2

4

You have to use the parentNode attribute, which will return the parent element, here the <td> :

if(record.get('model') == 'top'){
    document.getElementById('first').parentNode.visibility = "hidden";
} else {
    document.getElementById('first').parentNode.visibility = "visible";
}
Julien Fouilhé
  • 2,583
  • 3
  • 30
  • 56
1

Try this:

document.getElementById("first").parentNode.style.display = 'none';
Amberlamps
  • 39,180
  • 5
  • 43
  • 53
  • but is still there. only the link is getting hide – Hemant Aug 22 '12 at 10:18
  • if(record.get('model') == 'top'){ document.getElementById('first').parentNode.style.display = "none"; }else{ document.getElementById('first').parentNode.style.display = "block"; } – Hemant Aug 22 '12 at 12:10
  • What do you mean by removed? Not visible to user (content and space) or actually removed from the DOM? If you want to remove the TD from DOM try this: `document.getElementById("first").parentNode.removeChild(document.getElementById("first"));` – Amberlamps Aug 22 '12 at 12:15
  • the content and space should not visible to user, i want to remove it from DOM. I tried your code still showing space – Hemant Aug 22 '12 at 12:29
  • Then there must be something wrong with your code. Check this fiddle for reference: http://jsfiddle.net/u2aYJ/1/ – Amberlamps Aug 22 '12 at 12:38