1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Web Design, HTML And CSS' started by nimesh, Jun 18, 2009.

  1. nimesh

    nimesh New Member

    Joined:
    Apr 13, 2009
    Messages:
    770
    Likes Received:
    20
    Trophy Points:
    0
    Occupation:
    Oracle Apps Admin
    Location:
    Mumbai
    Home Page:
    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: Jun 18, 2009
  2. nimesh

    nimesh New Member

    Joined:
    Apr 13, 2009
    Messages:
    770
    Likes Received:
    20
    Trophy Points:
    0
    Occupation:
    Oracle Apps Admin
    Location:
    Mumbai
    Home Page:
    Well... no ones here to answer :)

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

Share This Page