javascript recursive iteration is returning entire parent div in the recursive iteration

Question

I want to implement search functionality on my div whose html is as below :

<input type="search" id="mysearch" placeholder="Search here"     />
    <div  class="sken-cues-body" id="mydivbody">
         <div class="sken-cue-card" style="display: block;" >
            <div class="salesken-flex salesken-flex-column">
                <div class="sken-cue-title">Welcome to My Customer!</div>
                <div class="sken-cue-text">
                    Want to help every sales agent like a <b>champion !</b>
                </div>
                <div class="">
                    <a type="button" href="https://salesken.ai/sign-in.html" class="sken-button-theme">START HERE</a>
                </div>
            </div>
        </div>  
        <div class="sken-cue-card salesken-flex"  style="display: block;">
            <div class="salesken-flex salesken-flex-column">
                <div class="sken-cue-time">2:16 pm</div>
                <div class="sken-cue-title">Talking Points</div>
                <div class="sken-cue-text" id="11">
                    <ul >
                        <li>Greet the customer</li>
                        <li>Ask if it is a good time to talk</li>
                        <li>Be polite &amp; courteous on the call</li>
                        <li>Listen carefully</li>
                        <li>Thank the customer for their time</li>
                    </ul>
                    <p></p>
                </div>
            </div>
        </div>
         <div class="sken-cue-card salesken-flex" style="display: block;">
            <div class="salesken-flex salesken-flex-column">
                <div class="sken-cue-time">2:16 pm</div>
                <div class="sken-cue-title"></div>
                <div class="sken-cue-text">
                    <p>
                        Introduce yourself and why you are calling, ask if it is a good time to talk<br>
                    </p>
                </div>
            </div>
        </div>
        <div class="sken-cue-card salesken-flex" style="display: block;">
            <div class="salesken-flex salesken-flex-column">
                <div class="sken-cue-time">2:16 pm</div>
                <div class="sken-cue-title">
                    <p>
                        <span style="font-family: Arial; font-size: 13.3333px;">NPA Guidelines</span><br>
                    </p>
                </div>
                <div class="sken-cue-text">
                    <p>
                        If the account has not been active for more than 90 days, it will be declared an NPA and that will lead to strident actions. Need to start&nbsp;paying the EMIs to avoid unnecessary legal hassles<br>
                        <br>
                    </p>
                </div>
            </div>
        </div> 
    </div>

For implemention search functionality,i need to recursive iteration inside div with ID mydivbody. Below is javascript function for recursive iteration in div with ID mydivbody:

document.getElementById('mysearch').addEventListener('keyup',function(){
    var node = document.getElementById('mydivbody')
    allDescendants(node,this.value) 
});

function allDescendants (node) {
    for (var i = 0; i < node.children.length; i++) {
      var child = node.children[i];
      allDescendants(child);
         console.log(child)
      }

      //doSomethingToNode(child,search_value);
    }

But in this js function, i can see all child nodes where i am consoling the child along with entire parent div. for me node is getting duplicated. Please suggest how to fix this

Answer 1

The recursive iteration of your function allDescendants() is actually correct and does not generate duplicates. If you console.log() an element it will also contain its children, which maybe makes you confused in it containing duplicates.

I expanded it with an actual return and a Level property to show you that the iteration is correct.

 function allDescendants(node, list, level){ //REM: To actually return elements, thos get stored in a list var tList = list || []; var tLevel = ~~level; for(var i = 0; i < node.children.length; i++){ var child = node.children[i]; //REM: Store children in the list tList.push({Level: tLevel, Element: child}); //REM: Took the log before the call, makes it more intuitive //console.log(child); allDescendants(child, tList, tLevel+1) }; return tList }; var tResult = allDescendants(document.querySelector('#mydivbody')); console.log(tResult);

 <input type="search" id="mysearch" placeholder="Search here" /> <div class="sken-cues-body" id="mydivbody"> <div class="sken-cue-card" style="display: block;" > <div class="salesken-flex salesken-flex-column"> <div class="sken-cue-title">Welcome to My Customer!</div> <div class="sken-cue-text"> Want to help every sales agent like a <b>champion !</b> </div> <div class=""> <a type="button" href="https://salesken.ai/sign-in.html" class="sken-button-theme">START HERE</a> </div> </div> </div> <div class="sken-cue-card salesken-flex" style="display: block;"> <div class="salesken-flex salesken-flex-column"> <div class="sken-cue-time">2:16 pm</div> <div class="sken-cue-title">Talking Points</div> <div class="sken-cue-text" id="11"> <ul > <li>Greet the customer</li> <li>Ask if it is a good time to talk</li> <li>Be polite &amp; courteous on the call</li> <li>Listen carefully</li> <li>Thank the customer for their time</li> </ul> <p></p> </div> </div> </div> <div class="sken-cue-card salesken-flex" style="display: block;"> <div class="salesken-flex salesken-flex-column"> <div class="sken-cue-time">2:16 pm</div> <div class="sken-cue-title"></div> <div class="sken-cue-text"> <p> Introduce yourself and why you are calling, ask if it is a good time to talk<br> </p> </div> </div> </div> <div class="sken-cue-card salesken-flex" style="display: block;"> <div class="salesken-flex salesken-flex-column"> <div class="sken-cue-time">2:16 pm</div> <div class="sken-cue-title"> <p> <span style="font-family: Arial; font-size: 13.3333px;">NPA Guidelines</span><br> </p> </div> <div class="sken-cue-text"> <p> If the account has not been active for more than 90 days, it will be declared an NPA and that will lead to strident actions. Need to start&nbsp;paying the EMIs to avoid unnecessary legal hassles<br> <br> </p> </div> </div> </div> </div>

If you just want the textNodes (innerText?) you could make use of createTreeWalker() .

 var treeWalker = document.createTreeWalker( document.getElementById('mydivbody'), NodeFilter.SHOW_TEXT ); var nodeList = []; var currentNode = treeWalker.currentNode; while(currentNode) { //nodeList.push(currentNode.wholeText); nodeList.push(currentNode.textContent); currentNode = treeWalker.nextNode(); }; console.log(nodeList);

 <input type="search" id="mysearch" placeholder="Search here" /> <div class="sken-cues-body" id="mydivbody"> <div class="sken-cue-card" style="display: block;" > <div class="salesken-flex salesken-flex-column"> <div class="sken-cue-title">Welcome to My Customer!</div> <div class="sken-cue-text"> Want to help every sales agent like a <b>champion !</b> </div> <div class=""> <a type="button" href="https://salesken.ai/sign-in.html" class="sken-button-theme">START HERE</a> </div> </div> </div> <div class="sken-cue-card salesken-flex" style="display: block;"> <div class="salesken-flex salesken-flex-column"> <div class="sken-cue-time">2:16 pm</div> <div class="sken-cue-title">Talking Points</div> <div class="sken-cue-text" id="11"> <ul > <li>Greet the customer</li> <li>Ask if it is a good time to talk</li> <li>Be polite &amp; courteous on the call</li> <li>Listen carefully</li> <li>Thank the customer for their time</li> </ul> <p></p> </div> </div> </div> <div class="sken-cue-card salesken-flex" style="display: block;"> <div class="salesken-flex salesken-flex-column"> <div class="sken-cue-time">2:16 pm</div> <div class="sken-cue-title"></div> <div class="sken-cue-text"> <p> Introduce yourself and why you are calling, ask if it is a good time to talk<br> </p> </div> </div> </div> <div class="sken-cue-card salesken-flex" style="display: block;"> <div class="salesken-flex salesken-flex-column"> <div class="sken-cue-time">2:16 pm</div> <div class="sken-cue-title"> <p> <span style="font-family: Arial; font-size: 13.3333px;">NPA Guidelines</span><br> </p> </div> <div class="sken-cue-text"> <p> If the account has not been active for more than 90 days, it will be declared an NPA and that will lead to strident actions. Need to start&nbsp;paying the EMIs to avoid unnecessary legal hassles<br> <br> </p> </div> </div> </div> </div>