Question

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

Answer 1

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>