Скрыть класс, когда для другого отображения класса установлен встроенный блок!

Question

Мне нужно скрыть один класс на основе отображения другого класса, установленного на inline-block !important, используя только JavaScript.Вот что у меня есть:

window.onload = function() {

  hidedeliveryFunction() {
    var outOfstock = document.getElementsByClassName(".action,.alert"),
        deliveryOptions = document.getElementsByClassName(".shipping-product-info");

    if (outOfstock.style.display === "inline-block !important") {
      deliveryOptions.style.display = "none";
    }
  }
};

<!-- if this div display is inline-block !important -->
<div class="product alert stock">
  <a href="#" data-post="" title="Out of stock" class="action alert">Out of stock</a>
</div>

<!-- then this div display is none -->
<div class="shipping-product-info">
  <div class="ship-clickcollect option--available">
    <div class="shipping-product-info--options">
      <div class="shipping-product-info--icon"></div>
      <div class="shipping-product-info--available"></div>
      <div class="shipcontroller">
        <p>Available on orders over $40. Collection in 1-7 days. WA orders 1-14 days. <a href="/click-and-collect"
            target="_blank">More&nbsp;info&nbsp;»</a></p>
      </div>
    </div>
  </div>
  <div class="ship-homedelivery option--not-available">
    <div class="shipping-product-info--options">
      <div class="shipping-product-info--icon"></div>
      <div class="shipping-product-info--available"></div>
      <div class="shipcontroller">
        <p>Free express shipping over $99. Some exclusions apply. <a href="/free-shipping-australia-wide">More&nbsp;info&nbsp;»</a></p>
      </div>
    </div>
  </div>
</div>

Answer 1

возможно, вы можете использовать этот код, чтобы скрыть

var hidediv = document.getElementById("hidediv");
var showdiv = document.getElementById("showdiv");
if (hidediv.style.display === "none") {
     showdiv.style.display = "block";
   } else {
     hidediv.style.display = "none";
   }

Answer 2

Вам может не потребоваться тестировать деталь !important в вашем случае использования..getComputedStyle() должен позаботиться об этом:

window.addEventListener("DOMContentLoaded", function() {
  // Don't use .getElementsByClassName() as it returns a live node list
  // which isn't right for most use cases. And because you are only looking
  // for a single element match, use .querySelector() instead.
  var outOfstock = document.querySelector(".product.alert.stock");
  var deliveryOptions = document.querySelector(".shipping-product-info");

  if (getComputedStyle(outOfstock).display === "inline-block") {
    deliveryOptions.style.display = "none";
  }
});

.alert { display:inline-block !important; }

<!-- if this div display is inline-block !important -->
<div class="product alert stock">
  <a href="#" data-post="" title="Out of stock" class="action alert">Out of stock</a>
</div>

<!-- then this div display is none -->
<div class="shipping-product-info">
  <div class="ship-clickcollect option--available">
    <div class="shipping-product-info--options">
      <div class="shipping-product-info--icon"></div>
      <div class="shipping-product-info--available"></div>
      <div class="shipcontroller">
        <p>Available on orders over $40. Collection in 1-7 days. WA orders 1-14 days. <a href="/click-and-collect"
            target="_blank">More&nbsp;info&nbsp;»</a></p>
      </div>
    </div>
  </div>
  <div class="ship-homedelivery option--not-available">
    <div class="shipping-product-info--options">
      <div class="shipping-product-info--icon"></div>
      <div class="shipping-product-info--available"></div>
      <div class="shipcontroller">
        <p>Free express shipping over $99. Some exclusions apply. <a href="/free-shipping-australia-wide">More&nbsp;info&nbsp;»</a></p>
      </div>
    </div>
  </div>
</div>

Answer 3

Я не уверен, но вы можете попробовать удалить класс "shipping-product-info", когда элемент "outOfstock" выполнил условие

deliveryOptions.classList.remove("shipping-product-info")