es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Encontrar un elemento y eliminarlo utilizando InnerText a través de Vanilla JS

01 Aug, 2023 Programación

Estoy tratando de encontrar y eliminar un elemento utilizando el InnerText con JavaScript básico. No puedo utilizar jQuery ni editar el código existente del sitio web, aunque sería mucho más simple. El código ‘nuevo’ inyectado debe encargarse del trabajo.

Debido a que las clases de los div no son únicas y el orden no siempre es consistente, necesito una forma de acceder al 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 A/B, es decir, Optimizely. Puedo eliminar los elementos con el nombre de clase ‘rate-card’, pero solo quiero eliminar aquel que dice ‘Clean Care’ en el título.

Aquí está el código del sitio web que estoy tratando de identificar y eliminar.

<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->

Aquí está el código que tengo hasta ahora. Puedo eliminar el elemento con el nombre de clase ‘rate-card’, pero solo quiero eliminar el elemento con el título ‘Clean Care’. Los elementos no siempre están en el mismo orden, por lo que no es posible usar el indicador de orden del hijo para acceder al elemento.

<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
<script> 
const elem= document.getElementsByClassName("rate-card");

while (elem.length > 0)
    elem[0].remove();
</script>
<!-- end snippet -->
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para eliminar el elemento con el título ‘Clean Care’ usando InnerText con vanilla JS, primero puedes seleccionar todos los elementos con el nombre de clase ‘rate-card’, luego recorrerlos verificando si el InnerText del div ‘rate-card-title’ del elemento coincide con la cadena ‘Clean Care’. Si es así, eliminas el elemento usando el método remove().

    Aquí está el código actualizado:

    <script>
const elem = document.getElementsByClassName("rate-card");

for(let i = 0; i < elem.length; i++){
  let title = elem[i].getElementsByClassName("rate-card-title")[0].innerText;
  if(title.includes("Clean Care")){
    elem[i].remove();
  }
}
</script>

    Este código solo eliminará el elemento con el título ‘Clean Care’ y dejará los demás elementos con el nombre de clase ‘rate-card’ intactos.

Comments are closed.