I'm trying to find and remove an element using the InnerText with vanilla JS. Can not use jQuery, or edit the existing website code, even though it would be much simpler. The 'new' injected code has to handle the work.
Because the div classes are not unique and the order is not always consistent, I need a way to hook into the element and delete it with JS. The code to remove the elements will be deployed in the header through an AB testing tool, i.e Optimizely. I'm able to delete the elements with class name 'rate-card', but I only want to remove the one that says 'Clean Care' in the title.
Here's the website code I'm trying to identify and delete.
<div class="collapse d-md-block" id="ItemRates-1">
<div class="rate-card">
<div class="rate-card-title">
<strong>Best Rate</strong>
<button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK1" data-original-title="" title="">
</button>
</div>
</div>
<div class="rate-card">
<div class="rate-card-title">
<strong>Clean Care</strong>
<button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK2" data-original-title="" title="">
</button>
</div>
</div>
</div>Here's the Code I have so far. Able to delete the element with class name 'rate-card', but I only want to delete the element with the title 'Clean Care'. Elements are not always in the same order, so using the child order statement to hook the element is not possible.
<script>
const elem= document.getElementsByClassName("rate-card")
while (elem.length > 0 )
elem[0].remove();
</script>If you put the title in a data-attribute (its value displayed as a :before pseudo), you can use a simple query and forEach to remove the element(s). Something like:
setTimeout(() =>
document.querySelectorAll(`[data-title='Clean Care']`)
.forEach(elem => elem.closest(`.rate-card`).remove()), 1500
);.rate-card-title:before {
content: attr(data-title);
font-weight: bold;
}
.btn-plain:before {
content: 'Select ...';
}<div class="collapse d-md-block" id="ItemRates-1">
<div class="rate-card">
<div class="rate-card-title" data-title="Best Rate">
<button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK1" data-original-title="" title="">
</button>
</div>
</div>
<div class="rate-card">
<div class="rate-card-title" data-title="Clean Care"> (I will be deleted soon ...)
<button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK2" data-original-title="" title="">
</button>
</div>
</div>
</div>[Edit based on comment]. If you need to read the title from the <strong>-element, it's basically the same, but with a test of the elements' textContent.
setTimeout(() => removeElem(`Clean Care`), 1500);
function removeElem(title) {
document.querySelectorAll(`.rate-card-title`)
.forEach(elem => {
if (RegExp(title).test(elem.textContent)) {
elem.closest(`.rate-card`).remove();
}
});
}<div class="collapse d-md-block" id="ItemRates-1">
<div class="rate-card">
<div class="rate-card-title">
<strong>Best Rate</strong>
<button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK1" data-original-title="" title="">
</button>
</div>
</div>
<div class="rate-card">
<div class="rate-card-title">
<strong>Clean Care</strong>
<button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK2" data-original-title="" title="">
</button>
</div>
</div>
</div>You will have to look for the text in the string element and remove it.
document.querySelectorAll(".rate-card").forEach(card => {
const text = card.querySelector("strong").innerText;
if(text === "Clean Care") {
card.remove();
}
});<div class="collapse d-md-block" id="ItemRates-1">
<div class="rate-card">
<div class="rate-card-title">
<strong>Best Rate</strong>
<button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK1" data-original-title="" title="">
</button>
</div>
</div>
<div class="rate-card">
<div class="rate-card-title">
<strong>Clean Care</strong>
<button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK2" data-original-title="" title="">
</button>
</div>
</div>
</div>or you can loop over the string elements and go back up to the card to remove it
document.querySelectorAll(".rate-card strong").forEach(strong => {
const text = strong.innerText;
if(text === "Clean Care") {
strong.closest('.rate-card').remove();
}
});<div class="collapse d-md-block" id="ItemRates-1">
<div class="rate-card">
<div class="rate-card-title">
<strong>Best Rate</strong>
<button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK1" data-original-title="" title="">
</button>
</div>
</div>
<div class="rate-card">
<div class="rate-card-title">
<strong>Clean Care</strong>
<button type="button" class="btn-plain tooltip" data-toggle="modal" data-target="#PK2" data-original-title="" title="">
</button>
</div>
</div>
</div>