How to remove the textNodes or maybe just skip it in the javascript

Question

So I have annoying textNodes and I want to avoid it when I'm calling my items. How can I remove it in the modern syntax of javascript? Cause I've seen the other syntax is pretty odd or pretty old.

Here is the code

const pictures = document.querySelectorAll('.box .slider')
const cursor = document.querySelector('.cursor')
const container = document.querySelector('.container')
const box = document.querySelectorAll('.box')

box.forEach((elem_,i)=>{
    // console.log(elem_)
    // console.log(elem_.childNodes[5])
    // console.log(i)
    const pictures_ = elem_.childNodes[5].childNodes

    console.log(pictures_)
    console.log(pictures_[0])
    console.log(pictures_.length)

})

*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.container .cursor {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: pink;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: all 0.2s ease;
  transition-property: background, transform;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container .cursor .cursor-inside {
  border-radius: 50%;
  width: 50%;
  height: 50%;
  background: #b9a480;
}
.container .box {
  width: 100%;
  height: 500px;
  display: grid;
  grid-template-columns: 10% 20% 70%;
  position: relative;
  background: black;
  border: 2px solid transparent;
}
.container .box .number, .container .box .text {
  font-family: "Vonique64";
  font-size: 1.5vw;
  color: #b5a23a;
  padding: 5px;
  position: relative;
}
.container .box .text {
  font-family: "Cinzel Decorative";
}
.container .box .number {
  justify-self: center;
  grid-column: 1/2;
  display: grid;
  align-items: center;
  justify-content: center;
}
.container .box .number::after {
  content: "";
  position: absolute;
  background: #b5a23a;
  width: 100%;
  height: 5px;
  bottom: 40%;
}
.container .box .text {
  justify-self: center;
  grid-column: 2/3;
  display: grid;
  align-items: center;
  justify-content: center;
}
.container .box .line {
  justify-self: center;
  grid-column: 3/3;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #322724;
}
.container .box .line::before {
  content: "";
  position: absolute;
  width: 80%;
  height: 5px;
  background: #b5a23a;
}
.container .box .slider {
  position: absolute;
  width: 300px;
  height: 500px;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all 0.1s ease-in-out;
}
.container .box img {
  width: 100%;
  height: 100%;
}

<div class="container">
        <!-- <div class="cursor">
            <div class="cursor-inside">
                
            </div>
        </div> -->
        <div class="box">
            <div class="number"> 
                <div class="hide">
                    <h1> 01 </h1>
                </div>
            </div>
            <div class="text">
                <div class="hide">
                    <h1> SEXY BAR </h1>
                </div>
            </div>
            <div class="line">
                <div class="slider">
                    <img src="./Anya.jpg" alt="">
                </div>
                <div class="slider">
                    <img src="./Loid.jpg" alt="">
                </div>
                <div class="slider">
                    <img src="./Yor.webp" alt="">
                </div>
                <div class="slider">
                    <img src="./Anya.jpg" alt="">
                </div>
                <div class="slider">
                    <img src="./Loid.jpg" alt="">
                </div>
                <div class="slider">
                    <img src="./Yor.webp" alt="">
                </div>
            </div>
        </div>
        <div class="box">
            <div class="number"> 
                <div class="hide">
                    <h1> 02 </h1>
                </div>
            </div>
            <div class="text">
                <div class="hide">
                    <h1> DANCE BAR </h1>
                </div>
            </div>
            <div class="line">
                <div class="slider">
                    <img src="./Anya.jpg" alt="">
                </div>
                <div class="slider">
                    <img src="./Loid.jpg" alt="">
                </div>
                <div class="slider">
                    <img src="./Yor.webp" alt="">
                </div>
                <div class="slider">
                    <img src="./Anya.jpg" alt="">
                </div>
                <div class="slider">
                    <img src="./Loid.jpg" alt="">
                </div>
                <div class="slider">
                    <img src="./Yor.webp" alt="">
                </div>
            </div>
        </div>
        <div class="box">
            <div class="number"> 
                <div class="hide">
                    <h1> 03 </h1>
                </div>
            </div>
            <div class="text">
                <div class="hide">
                    <h1> ACTOR BAR </h1>
                </div>
            </div>
            <div class="line">
                <div class="slider">
                    <img src="./Anya.jpg" alt="">
                </div>
                <div class="slider">
                    <img src="./Loid.jpg" alt="">
                </div>
                <div class="slider">
                    <img src="./Yor.webp" alt="">
                </div>
                <div class="slider">
                    <img src="./Anya.jpg" alt="">
                </div>
                <div class="slider">
                    <img src="./Loid.jpg" alt="">
                </div>
                <div class="slider">
                    <img src="./Yor.webp" alt="">
                </div>
            </div>
        </div>
    </div>

OR maybe just look at here in the console of codepen

https://codepen.io/myth-vince/pen/KKQyPmd?editors=1112

I want to remove the textNodes cause it kinda giving me a lot of errors in console can anyone help me with this?

uh okay..but how I do it with the...How do I call a addeventlistener on it sir? because it doesn't call Addeventlistener. — Myth Vince, May 25 '22 at 03:37
should I call `child` instead of `.children`? cause if I do that I will get the length. — Myth Vince, May 25 '22 at 03:38
There's no call to `addEventListener` in the code you posted. — Barmar, May 25 '22 at 03:39
`pictures.forEach(picture => picture.addEventListener(...))` — Barmar, May 25 '22 at 03:40
Actually no I didn't get it hahaha.. So bascailly what I am saying sir here is that I want to call the the children let say `const pictures_ = elem_.childNodes[5].children` and then I want to do something like this `pictures_[0].style.top = x + "px"` but it doesn't work cause it say it is a `HTMLDivElement` — Myth Vince, May 25 '22 at 03:45
`pictures_[0].firstElementChild.style.top = x + "px"`. The images are nested another level down. — Barmar, May 25 '22 at 14:11

How to remove the textNodes or maybe just skip it in the javascript

0 Answers0