Conceal a class if the inline-block !important display property is applied to another class

I am trying to hide a class based on the display property of another class being set to inline-block !important, using only JavaScript. Here is my current code snippet:

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 has a display property of 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 hide this div by setting its display property to 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>

javascripthtmlcss

Answer №1

It may not be necessary to test for the presence of !important in your specific scenario. Using .getComputedStyle() should handle it:

window.addEventListener("DOMContentLoaded", function() {
  // Avoid using .getElementsByClassName() since it returns a live node list
  // which might not be suitable for most situations. Instead, use .querySelector() as you are seeking 
  // only a single element match.
  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's display is inline-block with !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's display will be 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 №2

If you're unsure, one option to consider is removing the "shipping-product-info" class when the "outOfstock" element meets a certain condition.

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

Answer №3

One possible way to conceal content is by implementing the following script:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

ReactJS and JavaScript offer a convenient solution for extracting the most recent date from an array of date fields during the selection process

I have a table in ReactJS that displays an array of items. Each item has the following fields: id, requested_date, and location Additionally, there is another field called "date" which is located outside of the array. This "date" should always display th ...

javascriptreactjs

Top solution for live chat between server and client using jQuery, Java, and PHP on a localhost setup

Seeking recommendations for the best chat solution to facilitate communication between client PCs and a server in my private network. Specifically interested in an Ajax/Java solution similar to the chat support feature found in GMail. ...

javascriptjqueryajaxjquery-pluginslivechat

Prevent floating labels from reverting to their initial position

Issue with Form Labels I am currently in the process of creating a login form that utilizes labels as placeholders. The reason for this choice is because the labels will need to be translated and our JavaScript cannot target the placeholder text or our de ...

javascriptjqueryhtmlcss

Using JavaScript in PHP files to create a box shadow effect while scrolling may not produce the desired result

Issue at hand : My JavaScript is not functioning properly in my .php files CSS not applying while scrolling *CSS Files are named "var.css" #kepala { padding: 10px; top: 0px; left: 0px; right: 0px; position: fixed; background - c ...

javascriptphpjqueryhtmlcss

Difficulty aligning floated buttons in HTML and CSS

I am struggling with aligning the accept/decline buttons on my website. The cancel button is being pushed too far to the right because of the float: right; command I used, and I can't figure out how to properly align it. <?php echo' <html ...

htmlcss

React: Modifying state does not update useState array

The state of the array does not change when the state change method is called : const [arrayOfDocuments, setArrayOfDocuments] = useState([]); I have tried : setArrayOfDocuments(...[]); or setArrayOfDocuments([]); Where I use my method : const pushToArr ...

javascriptreactjsnext.js

Retrieving information for a specific table row and column

Currently, I am working on fetching data from an API. I have been attempting to retrieve data using an API and have referred to this website: https://www.geeksforgeeks.org/how-to-use-the-javascript-fetch-api-to-get-data/. The data is successfully console. ...

javascripthtmlarrays

Splitting a td tag into multiple columns dynamically with Angular

I am attempting to dynamically split the table element into separate columns. My desired layout should resemble this: https://i.sstatic.net/C81tg.png The values for name and surname are fixed at 1, but the values for subjects and grades can vary (there ma ...

javascripthtmlangulartypescripthtml-table

Identify a single characteristic of an object array

I need an Angular list that displays only the instances of a specific property from an array of objects, such as countries. $scope.testSites = [ { "site": "Testsite1", "country": "Country1", "customer": "Customer1"}, { "sit ...

javascriptangularjs

The JavaScript exec() RegExp method retrieves a single item

Possible Duplicate: Question about regex exec returning only the first match "x1y2z3".replace(/[0-9]/g,"a") This code snippet returns "xayaza" as expected. /[0-9]/g.exec("x1y2z3") However, it only returns an array containing one item: ["1"]. S ...

javascriptregex

Adjusting margin in CSS for SVGIcon to align with adjacent text elements - a step-by-step guide

Is there a way to set margin-left or margin-right for an Icon component inside a toggle button component (svg+text inside button) in ReactJS using CSS? https://i.sstatic.net/xQLrK.png https://i.sstatic.net/og4yE.png I am looking to create space between t ...

htmlcssreactjsuser-interface

AngularJS module is experiencing issues with loading properly

Can someone please help me understand what the issue is? I am new to AngularJS and may have overlooked something. Below is my simple HTML code: <!DOCTYPE html> <html> <script type="text/javascript" src="angular.js"></script> ...

javascriptangularjs

The MaterialTable component is indicating that there is no property called 'tableData' on the IPerson type

Incorporated an editable attribute to my MaterialTable component. Currently looking for a way to retrieve the index of updated or deleted items within the onRowUpdate and onRowDelete methods. To replicate the issue, refer to this minimal sandbox example: ...

javascriptreactjstypescriptreact-typescriptmaterial-table

"Utilizing Box elements, implementing linear gradients, styling with CSS, and

Currently, I am working on a project that involves using react JS and I am trying to find a solution for implementing linear gradient in multiple boxes. Specifically, I want to achieve the effect of having three identical boxes lined up next to each other. ...

javascriptcssreactjsmaterial-uibox

Model Abstracted Aurelia Validation

I recently completed an online course on Aurelia by Scott Allen where he introduced the Aurelia-Validation plugin for form validation. As a result, my view-model now looks like this in edit.js: import {inject} from "aurelia-framework"; import {MovieServi ...

javascriptaurelia

Check out the page design for section one!

I have been attempting to create a link to a specific section on a one-page website. Sometimes it works oddly, but most of the time it gets stuck at the section I clicked on and then manual scrolling does not function properly. From what I've researc ...

javascripthtmlcssonepage-checkout

You've got a function floating around without any specific theme tied to it. Make sure one of the parent elements is utilizing a ThemeProvider for proper context

I am working on implementing a Navbar in my current Project. The dependencies I am using are: mui/icons-material: ^5.2.5 mui/material: ^5.2.6 mui/styles: ^5.2.3 Here is the folder structure of my project: Root.jsx Navbar.jsx styles ...

javascriptreactjsmaterial-uimaterial-design

Create an array in JavaScript using the JSON data that was returned

After receiving some JSON data from a REST call, I have successfully parsed and added totals to the data. The results can be viewed on the page (refer to this post: json sibling data). However, now I want to further break down the totals. Here is the initi ...

javascriptjqueryarraysjson

Learn how to create a ReactNative splash screen that is displayed for 5 seconds before automatically disappearing

Currently, I am in the process of developing a splash screen component that should run for a minimum of 5 seconds when the application is launched initially before transitioning to another component or screen. Although I just began learning react-native y ...

javascriptnode.jsreactjsreact-nativesplash-screen

Ensure that the promise is fulfilled only if a specific condition is met

I have a complex if-else condition in my code that includes different promises. Once the logic determines which condition to enter and executes the corresponding promise, I need to ensure that a final promise is always executed. if (a < 5) { vm.pr ...

javascriptangularjs