How to remove an element without id

Question

I have the following code:

<%-- other tags --%>
<table>
  <tr width="100%">
    <td width="130" />
    <td id="BottomCell" width="100%" />
  </tr>
  <tr>
    <td/>
    <td/>
  </tr>
</table>
<%-- other tags --%>

There may be more than one table on the page. I want the td before "BottomCell" to be removed (or hidden) when the page is loaded. How can I do this with javascript or css?

Thanks.

BTW, I'm developing a Sharepoint WebPart that will be put onto a page. The is on that page, which i don't have control of directly. But the WebPart should remove this as long as it shows up on the page.

Answer 1

tr > td should do the trick.

Child and Sibling selectors

http://css-tricks.com/child-and-sibling-selectors/

Answer 2

In jQuery:

$('#BottomCell').prev().detach();

Answer 3

Wow, going back to basics after using a framework is hard work.

var element = document.getElementById('BottomCell').previousSibling;
var parent = element.parentNode;
parent.removeChild(element);

Answer 4

@diodeus if there are only 2 data cells that would be acceptable, however if you wish to remove the first data cell regardless of however many cells are located in that row, you can do something like

var el = document.getElementById('BottomCell');
el.removeChild(el.parentNode.firstChild);

Answer 5

Well, assuming you have only one table, then you could do something like this (in javascript):

var firstCell = document.getElementsByTagName('tr')[0].getElementsByTagName('td')[0];
firstCell.parentNode.removeChild(firstCell);

It would get the first cell of the first row in the entire DOM tree, and remove that cell.

Answer 6

In jQuery I would find the parent and use the :first selector probably