Estoy tratando de ocultar el padre de un DIV cuando un DIV determinado contiene un texto específico.
Un ejemplo. Este DIV quiero quedarme:
<div class="report-per-day"> <div class="report-day">26 May 2022</div> <div class="status-report-rows"> <p class="report__headline">This is our report</p> </div> </div> </div>Pero quiero ocultar todo este DIV, porque hay un DIV .mt-2, que contiene "Ningún incidente nuevo".
<div class="report-per-day"> <div class="report-day">25 May 2022</div> <div class="mt-2" style="display: none;"> <small class="text-muted">No new incident.</small> </div> </div> </div>Tengo este Java Script, pero solo oculta el .mt-2. También me gustaría ocultar sus 2 padres, .report-per-day y .report-day
¿Ustedes tienen alguna sugerencia? ¡Muchas gracias!
const divs = document.getElementsByClassName('mt-2'); for (let x = 0; x < divs.length; x++) { const div = divs[x]; const content = div.textContent.trim(); if (content == 'No incidents reported.') { div.style.display = 'none'; } }Repita el div principal que desea ocultar en lugar de mt-2 y verifique el contenido de mt-2 dentro del ciclo. Probar:
const divs = document.getElementsByClassName('report-per-day'); // report-per-day instead of mt-2 for (let x = 0; x < divs.length; x++) { const div = divs[x].querySelector('.mt-2'); // add a selector for .mt-2 const content = div.textContent.trim(); if (content == 'No incidents reported.') { div.style.display = 'none'; } }Puedes usar parentElement
const divs = document.getElementsByClassName('mt-2'); for (let x = 0; x < divs.length; x++) { const div = divs[x]; const content = div.textContent.trim(); if (content === 'No new incident.') { div.parentElement.style.display = 'none'; } } <div class="report-per-day"> <div class="report-day">26 May 2022</div> <div class="status-report-rows"> <p class="report__headline">This is our report</p> </div> </div> <div class="report-per-day"> <div class="report-day">25 May 2022</div> <div class="mt-2"> <small class="text-muted">No new incident.</small> </div> </div>