Estoy tratando de encontrar y eliminar un elemento usando InnerText con Vanilla JS. No se puede usar jQuery, ni editar el código del sitio web existente, aunque sería mucho más sencillo. El 'nuevo' código inyectado tiene que manejar el trabajo.
Debido a que las clases div no son únicas y el orden no siempre es consistente, necesito una forma de enlazar el elemento y eliminarlo con JS. El código para eliminar los elementos se implementará en el encabezado a través de una herramienta de prueba AB, es decir, Optimizely. Puedo eliminar los elementos con el nombre de clase 'rate-card', pero solo quiero eliminar el que dice 'Clean Care' en el título.
Este es el código del sitio web que intento identificar y eliminar.
<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>Aquí está el código que tengo hasta ahora. Capaz de eliminar el elemento con el nombre de clase 'tarjeta de tarifas', pero solo quiero eliminar el elemento con el título 'Cuidado limpio'. Los elementos no siempre están en el mismo orden, por lo que no es posible usar la declaración de orden secundario para enlazar el elemento.
<script> const elem= document.getElementsByClassName("rate-card") while (elem.length > 0 ) elem[0].remove(); </script>Si coloca el título en un atributo de datos (su valor se muestra como :before pseudo), puede usar una consulta simple y forEach para eliminar los elementos. Algo como:
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> [ Editar basado en el comentario ]. Si necesita leer el título del elemento <strong> , es básicamente lo mismo, pero con una prueba del contenido de texto de los elementos.
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>Deberá buscar el texto en el elemento de cadena y eliminarlo.
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>o puede recorrer los elementos de la cadena y volver a subir a la tarjeta para eliminarla
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>