Hi,
I'm just getting into the world of Javascript and is faced with this following problem:
How to filter out and hide/remove only those <p> elements that I've given a certain className with unobtrusive javascript.
Is there anyone out there that can display an example of how this is done??
Please - I would be eternally greatful!!
Jump to Post…Hi,
I'm just getting into the world of Javascript and is faced with this following problem:
How to filter out and hide/remove only those <p> elements that I've given a certain className with unobtrusive javascript.Is there anyone out there that can display an example of how this is done??
Jump to PostMay be this will help you:
<html> <head> <title>test</title> <script> function test() { var ps = document.getElementsByTagName('p'); for(var i = 0; i < ps.length; i++ ) { if(ps[i].className == 'test') ps[i].style.display = "none"; } } </script> <style> .test { color: red; } </style> </head> <body> <h4>Shows hiding …
Hi,
I'm just getting into the world of Javascript and is faced with this following problem:
How to filter out and hide/remove only those <p> elements that I've given a certain className with unobtrusive javascript.Is there anyone out there that can display an example of how this is done??
Yes many of the Dani members can do but before that we need some effort from you as well.
Put code that you tried so far. Then expect any response.
Hi again,
What I would like to see is when the code that controls the display of divs chosen from a list is active, the function below hides every paragraph (that contains a "Return to the top" link) with a certain className"aterga").
This is as far as I've come. I'm probably failing to see the obvious and at this time my eyes are soar. I' trying to incorporate the function:
function hideNav()
{
var paras = document.getElementsByTagName('p');
// create a for loop to iterate over the paras array
for (var i =0; i < paras.length; i++)
{
// get the current paragraph in the array
current_para = paras[i];
// use indexOf to check if 'hide' is in the className string
// indexOf returns -1 if no match is found - so if it doesn't equal -1, a match was found!
if (current_para.className.indexOf('aterga') != -1)
{
current_para.style.display = 'none';
}
}
}...with this code which is already working just fine:
function initShowHide()
{
if (document.getElementById && document.getElementsByTagName && document.createTextNode)
{
hide();
var listElement = document.getElementById("innehallsforteckning");
var links = listElement.getElementsByTagName('a');
for (var i = 0; i < links.length; i++)
{
links[i].onclick = function()
{
show(this);
return false;
}
}
}
}
function show(s) {
hide();
var id = s.href.match(/#(\w.+)/)[1];
document.getElementById(id).style.display = 'block'
}
function hide() {
var poems = document.getElementById("dikter").getElementsByTagName("div");
for (var i = 0; i < poems.length; i++)
{
poems[i].style.display = 'none';
}
}
window.onload = initShowHide;First of all I can't seem to figure out how and where to incorporate the function. Secondly, even when I isolate it still doesn't hide the paragraph named "aterga"(which means return in swedish).
Any suggestions?:)
May be this will help you:
<html>
<head>
<title>test</title>
<script>
function test() {
var ps = document.getElementsByTagName('p');
for(var i = 0; i < ps.length; i++ ) {
if(ps[i].className == 'test')
ps[i].style.display = "none";
}
}
</script>
<style>
.test {
color: red;
}
</style>
</head>
<body>
<h4>Shows hiding of all the paragraph elements with class name as 'test'</h4>
<br>
<input type='button' value="Hide" onclick="test();">
<br>
<p class="test">Hello hide me 1</p>
<p class="test">Hello hide me 2</p>
<p>Hello show me</p>
</body>
</html>Thank you so much, Luckychap! These tiny piece of code was all it took.
function test() {
var ps = document.getElementsByTagName('p');
for(var i = 0; i < ps.length; i++ ) {
if(ps[i].className == 'test')
ps[i].style.display = "none";
}
}However, if I was to remove the all the <P> with the className 'test' entirely from the DOMtree(not just hide it) is there any way to simply change that last line of code into something like:
ps[i].removeClass = "true";
//or...
ps[i].removeClass.nodeValue('test');Greetings:)
However, if I was to remove the all the <P> with the className 'test' entirely from the DOMtree(not just hide it) is there any way to simply change that last line of code into something like:
ps[i].removeClass = "true"; //or... ps[i].removeClass.nodeValue('test');
There are many javascript functions to achieve DOM manupulation. Please have look at good sites like w3schools.com.
hint:
document.getElementsByTagName('body')[0].removeChild(ps);
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.