'i need hide an element when an especific text is showing

I want to hide the check-out button when the text "No shipping options found for" is visible. I'm selecting by query all to get some elements, after this I select the button and I apply the style display none, but it is still showing. I don't know what i'm doing wrong.

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>
javascripthtmlcss


Solution 1:[1]

@Rana have been share a good answer but the text showing don't have any html tag. So i did this.

First select the text inside another and and later aply the display none

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>

Solution 2:[2]

  1. I think depending on text inside an element is not a god idea! but if you really want to do it, this is the way!

  2. It's better to have div inside and make it show and hide. Hiding a is not the best idea.

     let theShipmentElement = $("td[data-title='Shipment']");
 if(theShipmentElement.html().indexOf('No shipping options found for') > -1){
     theShipmentElement.hide();
 }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 msrwilo
Solution 2

Related Questions