通过 Vanilla JS 使用 InnerText 查找元素并删除

Question

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, ie 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>

Answer 1

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>

Answer 2

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>