asp.netcontrolshtmlgenericcontrol

How to keep child controls and only delete surrounding parent control?


I have a piece of code like this:

<div id="container" runat="server">
<div id="parent" runat="server">
<div id="child" runat="server">
<p>Some Content</p>
</div>
</div>
</div>

In a certain situation i want to remove the parent DIV and leave the child DIV intact.

Using something like this removes the complete html (parent + child):

container.Controls.Remove(container.FindControl("parent"))

or

parent.visible = false

Is it possible to keep the html within the parent DIV (child DIV) and removing the surrounding parent DIV?

Any help appreciated.

Marcellino


Solution

  • Try this

        <div id="container" runat="server">
                im container
                <br />
                <div id="parent" runat="server">
                    im parent
                    <br />
                    <div id="child" runat="server">
                        i am child
                        <br />
                    </div>
                </div>
            </div>
            <asp:Button runat="server" Text="remove" OnClick="remove_clicked" />
    <input type="button" value="client remove" onclick="remove();" />
    

    1. For Server side solution

     protected void remove_clicked(object sender, EventArgs e)
        {
            HtmlGenericControl tempChild = child;
            container.Controls.Remove(parent);
            container.Controls.Add(tempChild);
        }
    

    2. For Client side solution

    <script type="text/javascript" language="javascript">
            function remove() {
                var container = document.getElementById('<%= container.ClientID %>');
                var parent = document.getElementById('<%= parent.ClientID %>');
                var child = document.getElementById('<%= child.ClientID %>');
                container.removeChild(parent);
                container.appendChild(child);
            }
        </script>