How to keep child controls and only delete surrounding parent control? - asp.net

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>