Hide Detailsview field with javascript

Question

I am using a detailsview to show a record from the database for editing - or for inserting a new record. When a checkbox in one of the fields is changed by the user I want to hide another field. To avoid unnecessary postbacks I want to use javascript. Here is a simplified version of what I have so far:

<script type="text/javascript">
    function HideShowPromo(chk) {
        if (chk.checked == true) 
            //.style.display = 'block';
        else 
            //.style.display = 'none';
    }
</script>

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="false">
    <Fields>
        <asp:TemplateField HeaderText="Use Promotional Code:">
            <InsertItemTemplate>
                <asp:CheckBox ID="cbUsePromo" runat="server" />
            </InsertItemTemplate>
            <EditItemTemplate>
                <asp:CheckBox ID="cbUsePromo" runat="server" Checked='<%# Bind("_usePromo") %>' />
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Promotional Code:">
            <InsertItemTemplate>
                <asp:TextBox ID="txtPromoCode" runat="server" MaxLength="10"></asp:TextBox>
            </InsertItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="txtPromoCode" runat="server" Text='<%# Bind("_promo") %>' MaxLength="10"></asp:TextBox>
            </EditItemTemplate>
        </asp:TemplateField>
    </Fields>
</asp:DetailsView>      

and the code behind:

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        DetailsView1.DefaultMode = DetailsViewMode.Insert;              
        ((CheckBox)DetailsView1.FindControl("cbUsePromo")).Attributes.Add("onclick", "HideShowPromo(this)");
    }
}

I have been able to select the "txtPromoCode" textbox and hide it, but it leaves the headertext. I want to hide the whole field.

Answer 1

You should try to hide the whole row, so if the generated html is like:

<tr>
    <td>Header</td>
    <td><input id='txtPromoCode' /></td>
</tr>

Select the txtPromoCode with javascript and hide txtPromoCode.parentNode.parentNode (first parent is <td>, second one is <tr>)