I need to remove a section of the header with DOM for an A/B test. I need to do it just in two pages, but the problem is that I have the same classes in all the pages with the header and I don't want to remove it from all pages.
The html structure is like this:
<nav class="navbar navbar-dark fiex-top">
<div class="header-logo">
<div class="progress-indicator">
</nav>
<section class="main-page-container">
<div class="container about-page">
I need to remove "progress-indicator"
I tried adding this code
const new1 = document.querySelector(".main-page-container");
if (new1.classList.contains('about-page')) {
document.querySelector(".progress-indicator").remove();
}
And this one
const removeheader = querySelector(".container.about-page");
if (removeheader.length > 1) {
document.querySelector(".progress-indicator").remove();
}
It was the idea I had, because inside I have a div with a different class in each page, but it didn't give me results, I don't know if it's possible to modify it like this
I solved it with this code:
const removeheader1 = document.querySelector(".container.about-page");
if (removeheader1.classList.contains('about-page')) {
document.querySelector(".progress-indicator").remove();
}
It seems that the problem was in the way I added the classes