Using prototype/scriptaculous to hide the previous row

Question

I dont know if this is even possible, but I have a situation where I need to be able to hide the previous table row onload.

Situation:

<table>
<tr>
    <td>1</td>
    <td>a</td>
</tr>
<tr>
    <td>2</td>
    <td>b</td>
</tr>    
<tr id="removeabove">
    <td>3</td>
    <td>c</td>
</tr>
</table>

Now again I dont know if this is even possible, havent found it so far, but when I put the id removeabove in a row, I want the previous row to go poof and be gone (display: none;)

Tnx in advance

Answer 1

When putting the ID on the row, I assume you have a variable pointing to the row's element. If so, you can hide the previous row like this:

var prev = myrow.previous();
if (prev) {
    prev.hide();
}

(And if you don't, just precede the above with var myrow = $('removeabove');) Element#previous gives you the previous sibling element in the DOM, or undefined if there isn't one. You can also use a CSS selector with it to only match a previous element matching the selector, but that didn't seem necessary for what you were doing.

If you want the row to really be gone (not just hidden), you can use remove instead of hide, but you specifically mentioned "display: none" which is what hide does, so...