How can I remove DOM element using Tag type and not by ID?

nimesh's Avatar, Join Date: Apr 2009
Invasive contributor
I'm using ASP.NET gridview, with Sorting, which automatically generated the link for sorting.
And I want to copy all the data from Gridview to clipboard, except the anchor tags for sorting.

Currently I'm copying the HTML using outerhtml property, which also brings the anchor tags with it.

This is the code I used to copy the html content.
Code:
javascript:window.clipboardData.setData('Text', document.getElementById('GridView1').outerHTML)
which now I've modified to a function
Code:
    function copydata(){
        var obj = document.getElementById('GridView1');
        if (!obj) return false;
        var Elem = obj.getElementsByTagName('a');
        for (var i = 0; i < Elem.length; i++) {
            obj.removeChild(Elem[i]);
        }
        window.clipboardData.setData('Text', obj.outerHTML);
    }
But the problem is that the function removeChild only works with tag ID and not tag name.

The HTML that is getting generated does not contain ID in the anchor tags
Code:
<table cellspacing="0" cellpadding="4" rules="all" border="1" id="GridView1" style="color:Black;background-color:White;font-family:Arial;font-size:X-Small;border-collapse:collapse;">
	<tr style="color:White;background-color:#6B696B;font-weight:bold;">
		<th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$SID')" style="color:White;">SID</a></th>
		<th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$SERIAL#')" style="color:White;">SERIAL#</a></th>
		<th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$OSUSER')" style="color:White;">OSUSER</a></th>
		<th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$USERNAME')" style="color:White;">USERNAME</a></th>
		<th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$MACHINE')" style="color:White;">MACHINE</a></th>
		<th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$TERMINAL')" style="color:White;">TERMINAL</a></th>
		<th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$PROGRAM')" style="color:White;">PROGRAM</a></th>
		<th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$STATUS')" style="color:White;">STATUS</a></th>
		<th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$LOGON_TIME')" style="color:White;">LOGON_TIME</a></th>
</tr>
Can anyone help me in doing this? or suggest a better option

Last edited by nimesh; 18Jun2009 at 18:02..
nimesh's Avatar, Join Date: Apr 2009
Invasive contributor
Well... no ones here to answer

I just set it to style.display="none"