How to target tag after a class?

user_15022503 0
Viewed 49
<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');
javascript
7 Answers

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>

user_5243240 

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>

user_28051210

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>

user_11210080

If the div will be the first direct child of the pre-class div, and you have one element with "pre-class" class, this will work

const textContent = document.querySelector('.pre-class').firstElementChild.textContent;

console.log(textContent.replace('%', ''))
<div class="pre-class">
    <div>100%</div>
</div>

user_118879020

Use the child selector (>).

let textDiv=document.querySelector(".pre-class > div");
textDiv.textContent=textDiv.textContent.replace("%","");

This will replace the first direct div inside .pre-class. You can adjust the position of divs using pseudo classes. Like for example, if you want to select the second div inside .pre-class, you would use:

<div class="pre-class">
    <div>100%</div>
     <div>200%</div>
    <div>300%</div>
</div>

let textDiv=document.querySelector(".pre-class > div:nth-child(2)");
textDiv.textContent=textDiv.textContent.replace("%","");
user_166583410 

const content = document.querySelector('.pre-class > div').innerHTML;
content.replace("%", "");
<div class="pre-class">
    <div>100%</div>
</div>

This is another way of selecting the div nested in your .pre-class div. Perhaps not the best way of doing this but it's handy to know querySelector works.

user_72907720

If you have lots of divs inside div.pre-class , its better to add specific data attribute to each child div and select the desired div using this:

< div class = 'pre-class' >
  <div data-order = 'first' > 1 < /div> 
  <div data-order = 'second' > 2 < /div> 
  <div data-order = 'third' > 3 < /div> 
</div>


///////////
document.querySelector('div[data-order="first"]')

user_183185520
Related