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>

Answer 1

The answer was thank you @Quentin :

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

ChromeSelector[0].remove();