How to target tag after a class?-CodePudding

<div >
    <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');

CodePudding user response：

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 >
    <div>100%</div>
</div>

CodePudding user response：

You can use querySelector

let div = document.querySelector('div.pre-class > div');
div.innerText = div.innerText.replace('%', '')

<div >
    <div>100%</div>
</div>

CodePudding user response：

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 >
    <div>100%</div>
</div>

CodePudding user response：

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

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

CodePudding user response：

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"]')

CodePudding user response：

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 >
    <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 >
    <div>100%</div>
</div>

CodePudding user response：

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 >
    <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("%","");