Jc0807 Jc0807 - 6 months ago 22
Javascript Question

Hide div contains a certain text then hide another div option

I'm trying to figure out how I can hide a shipping option so that customers won't be able to see and select if one of the courier options includes the wording "Courier Rural"

Summary.

Hide Courier DIV (including the shippingprice) option IF Courier Rural DIV exists.

Example

<div class="shippingmethodlist">
<div class="shippingmethod" id="trShippingMethod_1">
<label class="shippingmethod-label" >Courier</label>
<span class="shippingprice">
<span id="tdShippingPrice_1">$0.00</span>
</span>
</div>
<div class="shippingmethod" id="trShippingMethod_2">
<label class="shippingmethod-label" >Pick up in store</label>
<span class="shippingprice">
<span id="tdShippingPrice_1">$0.00</span>
</span>
</div>
<div class="shippingmethod" id="trShippingMethod_3">
<label class="shippingmethod-label" >Courier Rural</label>
<span class="shippingprice">
<span id="tdShippingPrice_1">$0.00</span>
</span>
</div>
</div>


jq(function () {
if (jq(".shippingmethod-label").text() == "Courier Rural") {
jq(".shippingmethod-label").text() == "Courier").hide();
}
});


EDIT: Let me just clarify that i want the whole div hidden, not just the label

Answer

If there is a "Courier Rural" label, iterate over elements with the .shippingmethod-label class and hide its parent if the text is equal to "Courier"

$(document).ready(function() {
  if ($(".shippingmethod-label:contains('Courier Rural')").size()) {
    $(".shippingmethod-label").each(function() {
      if ($(this).html() === "Courier") {
        $(this).parent().hide();
      }
    });
  }
});

JSFiddle

Comments