Hide div包含特定文本，然后隐藏另一个div选项

Question

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">
        <span id="tdShippingTitle_1" class="shippingmethodname">
          <label class="shippingmethod-label" >Courier</label>
        </span>
        <span class="shippingprice">
          <span id="tdShippingPrice_1">$0.00</span>
        </span>
     </div>
     <div class="shippingmethod" id="trShippingMethod_2">
        <span id="tdShippingTitle_2" class="shippingmethodname">
          <label class="shippingmethod-label" >Pick up in store</label>
        </span>
        <span class="shippingprice">
          <span id="tdShippingPrice_1">$0.00</span>
        </span>
     </div>
     <div class="shippingmethod" id="trShippingMethod_3">
        <span id="tdShippingTitle_3" class="shippingmethodname">
          <label class="shippingmethod-label" >Courier Rural</label>
        </span
        <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 1

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().parent().hide();
      }
    });
  }
});

JSFiddle

Answer 2

Not sure which div you need to hide but try

if ($('.shippingmethod-label:contains("Courier Rural")')) {
    $('.shippingmethodlist').find('.shippingmethod-label:contains("Courier")').hide();
}

Answer 3

This is a great use case for data attributes. Add an attribute to each of your divs that looks something like this:

<div class="shippingmethod" data-purpose="something"></div>

<div class="shippingmethod" data-purpose="somethingelse"></div>

Then you can use the data attribute like you were the label selector in your JS function.

jq(function () {
    jq('.shippingmethod[data-purpose="something"]').hide();
});

EDIT (based on comment by OP)

If you cannot change the template html, and you MUST look for the element inside of the div, then you can use the .parent() function.

jq(function () {
    var courierOption, hideIt;
    jq('.shippingmethod-label').each(function(index, element) {
        if (element.text() === 'Courier Rural') {
            hideIt = true;
        } else if (element.text() === 'Courier') {
            courierOption = element.parent();
        }
    });

    if (hideIt) {
        courierOption.hide();
    }
});

Answer 4

From what I understand you want to hide a different shipping option (let's say "Courier") if the option "Courier Rural" is present.

This is possible. You could do something like this:

var hideMe;
var shouldHide = false;

$(".shippingmethod-label").each(function() {
  var el = $(this);
  if (el.text() === "Courier") {
    hideMe = el;
  } else if (el.text() === "Courier Rural") {
    shouldHide = true;
  }
});

if (hideMe && shouldHide) {
  hideMe.hide(); // or hideMe.parent().hide(); based on your needs
}

However, if this is for a real site and not just a thought experiment, this should be handled on your back end.