Quiero ocultar el botón de pago cuando el texto "No se encontraron opciones de envío para" está visible. Estoy seleccionando consultando todo para obtener algunos elementos, después de esto, selecciono el botón y aplico el estilo mostrar ninguno, pero aún se muestra. No sé qué estoy haciendo mal.
function hidenv() { var txt = document.querySelectorAll(".shipping td")[0].innerText; if (txt >= "No shipping options found for") { document.querySelectorAll(".proceed-to-checkout").forEach((element) => element.style.display = "none"); } } <tr class="shipping"> <th>Shipment</th> <td data-title="Shipment"> No shipping options found for <strong>xxxx, xxx, 0000</strong>. </td> </tr> <div class="proceed-to-checkout"> <a href="https://nextstep.nxt/" class="checkout-button"> Proceed payment</a> </div>Es porque no se define ningún evento para ejecutar la función. Aquí hidenv() en la parte inferior funciona como ejecución automática en carga.
También agregue la palabra que desea hacer coincidir en un contenedor separado para que pueda recuperarse fácilmente y hacer coincidir correctamente.
function hidenv() { var txt = document.querySelectorAll(".notFound")[0].innerText; if (txt == "No shipping options found for") { document.querySelector(".proceed-to-checkout").style.display = "none"; } } hidenv(); <tr class="shipping"> <th>Shipment</th> <td data-title="Shipment"> <span class="notFound">No shipping options found for</span><strong> xxxx, xxx, 0000</strong>. </td> </tr> <div class="proceed-to-checkout"> <a href="https://nextstep.nxt/" class="checkout-button"> Proceed payment</a> </div>¡Creo que depender del texto dentro de un elemento no es una buena idea! pero si realmente quieres hacerlo, ¡este es el camino!
Es mejor tener div adentro y hacer que se muestre y se oculte. Ocultar un no es la mejor idea.
let theShipmentElement = $("td[data-title='Shipment']"); if(theShipmentElement.html().indexOf('No shipping options found for') > -1){ theShipmentElement.hide(); }@Rana ha compartido una buena respuesta, pero el texto que se muestra no tiene ninguna etiqueta html. Así que hice esto.
Primero seleccione el texto dentro de otro y luego aplique el mostrar ninguno
function hidenv() { var txt = document.querySelector(".shipping").querySelectorAll("td")[0].innerText; if (txt === "No shipping options found for") { document.querySelector(".proceed-to-checkout").style.display = "none"; } } hidenv(); <tr class="shipping"> <th>Shipment</th> <td data-title="Shipment"> No shipping options found for <strong>xxxx, xxx, 0000</strong>. </td> </tr> <div class="proceed-to-checkout"> <a href="https://nextstep.nxt/" class="checkout-button"> Proceed payment</a> </div>