<asp:Panel ID="Panel2" runat="server" GroupingText="test"> Welcome to my site</asp:Panel>
The above <asp:Panel> tag is rendered as follows:
<div id="Panel1">
<fieldset>
<legend>
test
</legend>
Welcome to my site
</fieldset>
</div>
As it has been clear from the rendered tag, our target is to remove the <legend> tag:
Here is how to do it,
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Virtual Directory</title>
<script type="text/javascript">
function removeGroupText(){
var pnl=document.getElementById("Panel1");
var lgnd=pnl.getElementsByTagName("legend");
for (i=0; i<lgnd.length; i++){
lgnd[i].parentNode.removeChild(lgnd[i]);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px" GroupingText="Test">
<asp:Label ID="lbl1" runat="server" Text="Welcome to this site"></asp:Label>
</asp:Panel>
</div>
<input type="button" value="Remove" onclick="removeGroupText();" />
</form>
</body>
</html>
Hope, the above code will help users.