CODEWITHSUNDEEP
javascriptjqueryhtml
Jc0807
Jc0807

Reputation: 59

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

Upvotes: 0

Views: 1497

Answers (4)

yberg
yberg

Reputation: 110

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

Upvotes: 1

Gabriel McAdams
Gabriel McAdams

Reputation: 58251

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

Upvotes: 0

Victor
Victor

Reputation: 714

Not sure which div you need to hide but try

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

Upvotes: 1

Damon
Damon

Reputation: 4336

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.

Upvotes: 0

Related Questions