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

Question

我正在尝试找出如何隐藏送货选项，以便客户无法查看和选择其中一个 express 选项是否包含“Courier Rural”字样

摘要。

如果 Courier Rural DIV 存在，则隐藏 Courier DIV(包括运费)选项。

示例

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

编辑:让我澄清一下，我希望隐藏整个 div，而不仅仅是标签

Answer 1

如果有“Courier Rural”标签，则使用 .shippingmethod-label 类迭代元素，并在文本等于“Courier”时隐藏其父级

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

JSFiddle