How to find certain text on child nodes using JavaScript when selecting by class name

Question

I have multiple divs with the same structure as follows, I need to check for a text within the child nodes on each main div tag

<div class="s4-wpcell-plain">
  <div class="ms-chrome">
    <div class="ms-chrome-title" id="WPWPQ6_ChromeTitle">
      <span title="My Content" id="WPTitleWPQ6" class="js-wp-titleCell">
        <h2 style="text-align:justify;" class="ms-wp-titleText">Results (0)</h2>
      </span>
    </div>
    <div wpid="50348231-8acb-4794-af32-d481915fc127" haspers="false" id="WPWPQ6" width="100%" class="ms-WPBody ms-WPBorder noindex ms-wpContentDivSpace " allowdelete="false" style="">
      <div style="display: none;">
      </div>
        <div componentid="ctl00_ctl40_g_50348231_8acb_4794_af32_d481915fc127_csr" id="ctl00_ctl40_g_50348231_8acb_4794_af32_d481915fc127_csr">  
          <div class="containerForStyle">   
            <ul class="cbs-List">                   
              <div class="ms-srch-result-noResults">There are no items to show.&nbsp;</div>     
            </ul>
          </div>
        </div>
    </div>
  </div>
</div>

In this case I'm selecting the main div with document.getElementsByClassName("s4-wpcell-plain") from there I need to check for the text "There are no items to show" and hide the corresponding main div.

I have tried to use

document.getElementsByClassName("s4-wpcell-plain").getElementsByTagName("*")

and after this, I will scan on each element on innerText but it is not getting the elements, any help would be appreciated.

`getElementsByClassName` returns a `NodeList`, not a `Node`, so you can't call `getElementsByTagName` on it. See https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method — Heretic Monkey, Jun 08 '18 at 18:02
Is the main div `.s4-wpcell-plain` or the div that has the text? Are there more than one of these texts to be found? Are there multiple `.s4-wpcell-plain`? — zer00ne, Jun 08 '18 at 18:17
Mate, you can proceed like: `var eles = document.getElementsByClassName("s4-wpcell-plain");` `eles.map((ele) => { if(ele.innerText.indexOf(TemplateString) !== -1) {ele.style.display = 'none';} });` — nityanarayan44, Jun 08 '18 at 18:21
There are more divs like this one, I'm selecting them with getElementsByClassName so I have a list and from there I guess I need to loop into the child nodes until find the element that contains the text, which is in
tag — Carlos M, Jun 08 '18 at 18:26

REDDY PRASAD · Answer 1 · 2018-06-08T18:54:19.997

1

innerText returns text content of all of its nested childrens

try:

var elements = document.getElementsByClassName("s4-wpcell-plain");
for (var i = 0; i < elements.length; i++) {
    if (elements[i].innerText.indexOf('There are no items to show') !== -1) {
        elements[i].style.display = 'none';
    }   
}

edited Jun 08 '18 at 18:54

answered Jun 08 '18 at 18:10

REDDY PRASAD

1,309
2
14
29

Cannot read property 'IndexOf' of undefined when running the code – Carlos M Jun 08 '18 at 18:29
@CarlosM since `getElementsByClassName ` returns list, you have to iterate. check updated answer – REDDY PRASAD Jun 08 '18 at 18:55

nityanarayan44 · Answer 2 · 2018-06-08T18:58:49.390

So here are the things you may follow,

1 - Get the list of elements with document.getElementsByTagName
2 - You can use iterate over, to filter out with the innerText && ClassName for each element

CODE:

// Get the elements list by ClassName
var allEles = documents.getElementsByTagName("*");
var templateString = 'Something';
var wantedClassName = 'ClassName';

// Iterate over all the elements
for(var key in allEles) { 
    if( (a[key].className === wantedClassName) && (a[key].innerText) === templateString ) {
        /* Do Whatever you want with this element => a[key] */
    }
}

`

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

I wasn't sure if you wanted .s4-wpcell-plain to disappear or the element that has the text so I wrote code for both objectives and commented out the part that hides .s4-wpcell-plain.

Trying to find a text in DOM is inefficient, you need to use whatever this widget uses and I can assure you it isn't the text it generates. The pattern looks like if there's no items to show the message would be in a div with the className of:

.ms-srch-result-noResults

I don't know how your widget works so I'm assuming that whenever there's no items to show then it creates:

<div class="ms-srch-result-noResults">There are no items to show.&nbsp;</div>

The Demo:

Collects all .ms-srch-result-noResults into a NodeList with document.querySelectorAll()
Makes that NodeList into an array with Array.from()
Runs the array thru forEach() array method.
On each .ms-srch-result-noResults is sets style.display to none

There's also an alternate forEach() method setup to use closest() to find .s4-wpcell-plain and then hide that instead.

Demo

Details commented in Demo

/* Collect all .ms-srch-result-noResults into a NodeList
|| then convert that NodeList into an array
*/
var noResults = Array.from(document.querySelectorAll('.ms-srch-result-noResults'));

/* Run the array thru forEach() method
|| hide each .ms-srch-result-noResults
*/
noResults.forEach(function(v, i) {
  v.style.display = 'none';
});

/*//Or do the same thing but hide the .s4-wpcell-plain instead 
noResults.forEach(function(v, i) {
  var main = v.closest('.s4-wpcell-plain');
  main.style.display = 'none';
});
*/

<div class="s4-wpcell-plain">
  <div class="ms-chrome">
    <div class="ms-chrome-title" id="WPWPQ6_ChromeTitle">
      <span title="My Content" id="WPTitleWPQ6" class="js-wp-titleCell">
        <h2 style="text-align:justify;" class="ms-wp-titleText">Results (0)</h2>
      </span>
    </div>
    <div wpid="50348231-8acb-4794-af32-d481915fc127" haspers="false" id="WPWPQ6" width="100%" class="ms-WPBody ms-WPBorder noindex ms-wpContentDivSpace " allowdelete="false" style="">
      <div style="display: none;">
      </div>
      <div componentid="ctl00_ctl40_g_50348231_8acb_4794_af32_d481915fc127_csr" id="ctl00_ctl40_g_50348231_8acb_4794_af32_d481915fc127_csr">
        <div class="containerForStyle">
          <ul class="cbs-List">
            <li class="ms-srch-result-noResults">There are no items to show.&nbsp;</li>
          </ul>
        </div>
        <ul class="cbs-List">
          <li class="ms-srch-result-results">There are items to show.&nbsp;</li>

          <li>ITEM</li>
          <li>ITEM</li>
          <li>ITEM</li>
          <li>ITEM</li>
        </ul>
      </div>
      <ul class="cbs-List">
        <li class="ms-srch-result-results">There are items to show.&nbsp;</li>
        <li>ITEM</li>
        <li>ITEM</li>
        <li>ITEM</li>
      </ul>
    </div>
    <ul class="cbs-List">
      <li class="ms-srch-result-noResults">There are no items to show.&nbsp;</li>
    </ul>
  </div>
</div>

How to find certain text on child nodes using JavaScript when selecting by class name

3 Answers3

Demo