Can not select element using Selector result from Chrome

Question

I am trying to select an element with 'Selector name' and then delete it.

But I am unable to select the element :

Chrome give me Selector :

body > zea-hub > div > div > zea-my-accounts > zea-section > section > div > div > div:nth-child(1)

To select it I tried to use :

document.querySelector("body > zea-hub > div > div > zea-my-accounts > zea-section > section > div > div > div:nth-child(1)")

Which return null

and

document.querySelectorAll("body > zea-hub > div > div > zea-my-accounts > zea-section > section > div > div > div:nth-child(1)")

Which return NodeList[] I bet this is a good return

So I tried this way to delete this element :

var ChromeSelector = document.querySelectorAll("body > zea-hub > div > div > zea-my-accounts > zea-section > section > div > div > div:nth-child(1)");

ChromeSelector.parentNode.removeChild(ChromeSelector)

but it does not work... Am I missing something ?

var ChromeSelector = document.querySelectorAll("body > section > div > div > div:nth-child(1)");
alert(ChromeSelector)
ChromeSelector.parentNode.removeChild(ChromeSelector)

<section MySectionTest>
   <div _Firstdiv class="container">
     <div _Seconddiv class="Column">
       <div FirstSectionElement class="section">
         <h1 _ngcontent-kwd-c95="">Test</h1>
       </div>

       <div FirstSectionElement class="section">
         <h1 _ngcontent-kwd-c95="">Test2</h1>
       </div>
      </div>
   </div>
</section>

You need to read [How to ask a good question](https://stackoverflow.com/help/how-to-ask). There's no way anybody can reproduce the problem from the scant information you've provided in the question. — Quentin, May 09 '20 at 12:47
You cannot remove a nodelist. You can remove each node - if you get a nodelist, check the length - if it is 0 then your selector is not correct — mplungjan, May 09 '20 at 12:49
It is highly unlikely that querySelector returns null and querySelectorAll returns a nodelist with length > 0 - could this be a timing issue? Does it exist when you look for it? — mplungjan, May 09 '20 at 12:55
Duplicate of https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return — Quentin, May 09 '20 at 13:00
@Dorian — The duplicate explains. As did mplungjan in a comment 15 minutes ago. — Quentin, May 09 '20 at 13:05
Useful to tell us what exact element you wanted to delete. For example by adding "Delete me" inside the div — mplungjan, May 09 '20 at 13:18

score -1 · Accepted Answer · answered May 09 '20 at 13:18

-1

The answer was thank you @Quentin :

var ChromeSelector = document.querySelectorAll("body > section > div > div > div:nth-child(1)");

ChromeSelector[0].remove();

answered May 09 '20 at 13:18

TourEiffel

4,034
2
16
45

Same as `document.querySelector("body > section > div > div > div:nth-child(1)").remove();` – mplungjan May 09 '20 at 13:19
That is impossible. If `document.querySelectorAll("body > section > div > div > div:nth-child(1)")[0];' works then so will `document.querySelector("body > section > div > div > div:nth-child(1)");` ` – mplungjan May 09 '20 at 14:48
Try to wrap it in `window.addEventListener("load”, function() { ... });` – mplungjan May 09 '20 at 16:03
Do you have access to the part of the script that inserts the divs you want to modify? – mplungjan May 09 '20 at 16:16
So that is where you add the script to delete – mplungjan May 09 '20 at 16:44

Can not select element using Selector result from Chrome

1 Answers1