remove tag

rupert · 07-16-2011, 09:00 AM

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>

abduraooft · 07-16-2011, 09:08 AM

Your code works in Firefox. If you are aiming IE too, use

Code:

if(li[j].className=='test')

instead.

jmrker · 07-16-2011, 03:17 PM

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.

bullant · 07-17-2011, 10:55 AM

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.

rupert · 07-18-2011, 07:58 AM

Quote:

Originally Posted by jmrker

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..

Krupski · 07-18-2011, 04:54 PM

Quote:

Originally Posted by rupert

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.

Krupski · 07-18-2011, 04:57 PM

Quote:

Originally Posted by rupert

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);
}