Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: remove tag

  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts

    remove tag

    Hi all, here i got a problem, i want to remove all the Li tag that with a classname"test" .
    Code:
    <html>
    <head>
    <title>Introduction to the DOM</title>
    <script>
    window.onload = function(){
    var li = document.getElementsByTagName("li");
    for ( var j = 0; j < li.length; j++ ) {
         if(li[j].getAttribute('class')=='test'){
    li[j].parentNode.removeChild( li[j] );
         }
    }
    };
    </script>
    </head>
    <body>
    <h1>Introduction to the DOM</h1>
    <p class="test">There are a number of reasons why the 
    DOM is awesome, here are some:</p>
    <ul>
    <li class="ppp">ppp.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    </ul>
    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Your code works in Firefox. If you are aiming IE too, use
    Code:
    if(li[j].className=='test')
    instead.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Code:
    <html>
    <head>
    <title>Introduction to the DOM</title>
    <script>
    window.onload = function(){
      var li = document.getElementsByTagName("li");
      for ( var j = 0; j < li.length; j++ ) {  
        if(li[j].className=='test') { li[j].style.display = 'none'; }
      }
    };
    </script>
    <style type="text/css">
      .test { list-style-type:none; }
    </style>
    
    </head>
    <body>
    <h1>Introduction to the DOM</h1>
    <p class="test">There are a number of reasons why the 
    DOM is awesome, here are some:</p>
    <ul>
    <li class="ppp">ppp.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    </ul>
    </body>
    </html>
    This seems to work in both MSIE and FF.

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Code:
     
    if(li[j].className=='test') { li[j].style.display = 'none'; }
    that only hides the elements. It doesn't "remove" them like the op wants.

    @op

    using abduraooft's suggestion in your code should work in all major browsers.

  • #5
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Code:
    <html>
    <head>
    <title>Introduction to the DOM</title>
    <script>
    window.onload = function(){
      var li = document.getElementsByTagName("li");
      for ( var j = 0; j < li.length; j++ ) {  
        if(li[j].className=='test') { li[j].style.display = 'none'; }
      }
    };
    </script>
    <style type="text/css">
      .test { list-style-type:none; }
    </style>
    
    </head>
    <body>
    <h1>Introduction to the DOM</h1>
    <p class="test">There are a number of reasons why the 
    DOM is awesome, here are some:</p>
    <ul>
    <li class="ppp">ppp.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
    </ul>
    </body>
    </html>
    This seems to work in both MSIE and FF.
    yeah, it just hide them,but i want to remove all of them..

  • #6
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by rupert View Post
    Hi all, here i got a problem, i want to remove all the Li tag that with a classname"test" .
    Grab this function: http://code.google.com/p/getelementsbyclassname

    Works great in all browsers. Even works in MSIE.
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov

  • #7
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by rupert View Post
    yeah, it just hide them,but i want to remove all of them..
    Here's a neat little function that removes tags but leaves the text content in place:

    Code:
    /***
     * remove tag specified by element e
     * text content remains
     ***/
    var removeTags = function (e) {
        e.parentNode.insertBefore(document.createTextNode(e.innerHTML), e);
        return e.parentNode.removeChild(e);
    }
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •