Avatar of MJ
Flag for United States of America asked on

JavaScript: querySelectorAll returns element unexpectedly

querySelectorAll is returning an element that doesn't appear to be on the page? I have a web app that has a drop-down widget with a "change password"  option. When this option is selected, an overlay appears with an element of  <h3 class="modal-title">Change Password</h3>. I was doing some testing and if I land on a view with this widget and never select the "change password" option. I have no issues. The If I select the "change password" option, it (<h3 class="modal-title">Change Password</h3>) is detected fine. The issue is when I close the "Change password" overlay, the code still detects that is it there. Even if I go to a new view? If I inspect the code there isn't any element <h3 class="modal-title">Change Password</h3> but it is still being returned by querySelectorAll ? I did read "The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors." I'm assuming that is the issue but not sure how to ensure querySelectorAll  reads the live nodelist? Can I manually remove the element from the node list collection?  Unfortunately, I can't share the URL due to it being behind a firewall. 



Avatar of undefined
Last Comment

8/22/2022 - Mon
Michel Plungjan

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Julian Hansen

If querySelectorAll finds it - it is on the page - it may not be visible but it is there.If you are looking at the source with View Page and you don't find it - it is probably because it is being added dynamically

What you can do is in FireFox (not sure if Chrome has this option) go to your Inspector (console - F12) and do a search for the class / id / element that you think should not be there.

Michel Plungjan

@Julian Yes, Chrome has it too

Yeah, it is there after I open and close the overlay and inspect it! I  thought I did that before.My apologies!
Your help has saved me hundreds of hours of internet surfing.