Aimilios Dakos Aimilios Dakos - 7 months ago 26
HTML Question

javascript or css: How to Hide any Number followed by dot Prefix "1.text", "2.text"..."30.text" from a Text inside a Label

I want to hide with javascript or css all (numbers followed by dots) prefixes from a text inside a Label.
hide "1.", "2."..."30." from "1.text", "2.text"..."30.text" from the texts of a Label.



HTML
<li>
<label class="layered_nocolor">
1.alpha
</label>
</li>
<li>
<label class="layered_nocolor">
2.beta
</label>
</li>
<li>
<label class="layered_nocolor">
30.gama
</label>
</li>





i want my page to show the texts without the prefixes


alpha
beta
gama

Answer

You won't be able to hide anything by using CSS OR Javascript. You will need both of them. You will have to use CSS to hide the label and Javascript to changing dinamically the style of your label. First of all, create a CSS class called hide:

.hide{
   display: none;
 }

then, in your HTML, you will add this script:

// Gets all your HTML element with the class "layered_nocolor".
var labels = document.getElementsByClassName("layered_nocolor");
// The regex pattern you want to hide. It means "one or more digit before a dot".
var pattern = "(/d+\.)";
// Iterates all the elements you got from before. 
for(int i = 0; i < labels.length; i++){
  // If your label match the regex pattern you change the class hiding it.
  if(labels[i].innerHTML.match(pattern) != null){
    labels[i].class = "layered_nocolor hide";
  }
}

EDIT

After your explanation, this is the code you are looking for:

// Gets all your HTML element with the class "layered_nocolor".
var labels = document.getElementsByClassName("layered_nocolor");
// The regex pattern you want to hide. It means "one or more digit before a dot".
var pattern = "(/d+\.)";
// Iterates all the elements you got from before. 
for(int i = 0; i < labels.length; i++){
  // If your label match the regex pattern you replace the text with "" to remove it.
 (labels[i].innerHTML.replace(pattern, "");
}

EDIT 2

If you are using jQuery, this is the best way to do it:

$(".layered_nocolor").html(function(i, oldhtml){return oldhtml.replace(/\\d+\\./, "");});

The double "\" are important because if you insert it only once, it will be used as an escape character instead of a literal.