<div class="pre-class">
<div>100%</div>
</div>
I'm trying to remove the percent (%) on the text inside the div after the class pre-class with textContent.replace("%","") but I just can't target that specific div
(I'm working on a longer website with a lot of divs and I can't add an ID to it because it's from a shortcode.)
I thought I could do something like this:
var textContent = document.getElementsByClassName('gamipress-progress-bar-completed').getElementsByTagName('div');
You're basically there. Don't forget that getElementsByClassname returns an array, so simply use [0] to retrieve the element. You'll see it working in the snippet below:
var textContent = document.getElementsByClassName('pre-class')[0].getElementsByTagName('div')[0].innerHTML;
console.log(textContent)<div class="pre-class">
<div>100%</div>
</div>let containers = document.getElementsByClassName("pre-class");
for (var i = 0; i<containers.length; i++) {
let current = containers[i];
let textNode = current.children[0];
textNode.innerText = textNode.innerText.replace(/(\d)%/, '$1');
};<div class="pre-class">
<div>100%</div>
</div>Alternatively, you could use element.querySelector() (or querySelectorAll) to find the correct element(s) to replace.
let textNode = document.querySelector(".pre-class > div"); // use querySelectorAll in case there can be multiple matches.
textNode.innerText = textNode.innerText.replace(/(\d)%/, '$1');<div class="pre-class">
<div>100%</div>
</div>You can use querySelector
let div = document.querySelector('div.pre-class > div');
div.innerText = div.innerText.replace('%', '')<div class="pre-class">
<div>100%</div>
</div>