I'm trying to remove a toggle function from the page when a childElement is not present. This has to be done in vanilla javascript. Unfortunately, can not use jQuery. Here's what's going on.
when I run this in the console
let content = document.getElementById('productItemRates-1');
console.log(content.firstElementChild);
Code snippet is returned for checking if childElement is present:
<div class="product-rate-card">
<div class="product-rate-card-title">
<strong>Clean Power</strong>
<button type="button" class="card-btn-plain card-tooltip" data-toggle="modal" data-target="#PK1" data-original-title="" title="">
</button>
</div>
</div>
Which is the firstElementChild: div.product-rate-card
What I'm trying to do: Define logic to only remove the toggle button from all locations on the page (not specific to element) if the specific firstElementChild: .product-rate-card is not present in the ParentID: productItemRates-1. There are other references of the childElement: .product-rate-card found in other parentsIDs within the page. Also, order logic wont work because other childElements can take it's place when it is not present.
Used the below code to test removal, that worked, just can't figure out the conditioning logic.
document.querySelectorAll(".product-rates-toggle").forEach(el => el.remove());
Appreciate any guidance..
// replace document to content
if (!document.querySelector(".product-rate-card")) {
for (const el of document.querySelectorAll(".product-rates-toggle")) {
el.remove();
}
}Based on a comment of yours:
const toggleratecard = document.querySelector("#productItemRates-1");
if (toggleratecard.querySelector('.product-rate-card') === null) {
toggleratecard.querySelectorAll(".product-rates-toggle").forEach(el => el.remove()); }
}
Unfortunately your question does not offer any information as to where the toggle is that needs to be removed. My answer assumes it's in the toggleratecard. You can replace that with document if all the toggle on the whole page need to be removed.
Also, from what you write, it isn't entirely clear if the element, if present, must be the first element child.