Adding flair to the encompassing container

Below is the HTML code that I am working with:

<div class="um-field field-date">
  <p class="form-row " id="date_field">
    <label class="date">
      <input data-label="Date" data-value="" type="date" class="input-date um-frontend-field um-hide-field" name="date_1521080645" id="date_1521080645"> Date
    </label>
  </p>
</div>

I have identified a um-hide-field class within the code above. My goal is to hide this entire div based on this class. Is it possible to achieve this?

.um-hide-field {
  display:none;
}

To hide the complete div element alongside its parent.

javascripthtmlcss

Answer №1

Using JavaScript, you can achieve this by utilizing the parentNode property.

var hide = document.querySelectorAll(".um-hide-field");
Array.from(hide).forEach(function(elem) {
  var div = elem.parentNode.parentNode.parentNode;
  div.style.display = "none";
})
<div class="um-field field-date">
  <p class="form-row " id="date_field1">
    <label class="date"><input data-label="Date" data-value="" type="date" class="input-date um-frontend-field um-hide-field" name="date_1521080645" id="date_1521080645">Date1</label>
  </p>
</div>
<div class="um-field field-date">
  <p class="form-row " id="date_field2">
    <label class="date"><input data-label="Date" data-value="" type="date" class="input-date um-frontend-field" name="date_1521080646" id="date_1521080645">Date2</label>
  </p>
</div>
<div class="um-field field-date">
  <p class="form-row " id="date_field3">
    <label class="date"><input data-label="Date" data-value="" type="date" class="input-date um-frontend-field um-hide-field" name="date_1521080645" id="date_1521080647">Date3</label>
  </p>
</div>

Alternatively, you can use the closest() method in jQuery.

$("input.um-hide-field").closest(".um-field").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="um-field field-date">
  <p class="form-row " id="date_field1">
    <label class="date"><input data-label="Date" data-value="" type="date" class="input-date um-frontend-field um-hide-field" name="date_1521080645" id="date_1521080645">Date1</label>
  </p>
</div>
<div class="um-field field-date">
  <p class="form-row " id="date_field2">
    <label class="date"><input data-label="Date" data-value="" type="date" class="input-date um-frontend-field" name="date_1521080646" id="date_1521080645">Date2</label>
  </p>
</div>
<div class="um-field field-date">
  <p class="form-row " id="date_field3">
    <label class="date"><input data-label="Date" data-value="" type="date" class="input-date um-frontend-field um-hide-field" name="date_1521080645" id="date_1521080647">Date3</label>
  </p>
</div>

Answer №2

Here is a suggestion for the query mentioned earlier: 

um-field field-date > div > div
    {
        visibility:hidden;
    }

Answer №3

Currently, it is not possible to select "a parent element that has a child matching a specific selector". In the future, if :has becomes part of the standards, you could potentially use something like

.um-field:has(.um-hide-field)

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

However, this feature is still in development and is not yet supported by browsers.

Answer №4

With the power of jQuery: Conceal the container if the descendant has the attribute .um-hide-field

$(".um-field .um-hide-field").parents('div.um-field').hide();

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

When attempting to add a variable using the next() function, I encountered an error with the BehaviorSubject. The error message displayed was "this.count.next is not a function"

In my Angular service, there is a variable called count that I need to monitor for updates. Whenever this count variable is updated, I want to assign its new value to another variable in a separate component. import {BehaviorSubject} from "rxjs/BehaviorSu ...

javascriptangulartypescriptrxjs

What is the best way to implement this header style with code?

I came across this design from a potential client recently, even though we didn't end up working together. I thought it would be a good exercise to try coding the design for practice purposes. Just to clarify, this is not my original design and I have ...

htmlcss

The property being set in Angular is undefined, causing an error

I am struggling to understand why the code below is not functioning as intended: Main.html <div class="MainCtrl"> <h1>{{message.test}}</h1> </div> Main.js angular.module('myApp') .controller('MainCtrl', f ...

javascriptangularjs

Assigning attributes to inner components in VueJS based on prop values

Experimenting with some common VueJS syntax, but I am struggling to get this Button.vue SFC to function properly: <script setup> defineProps({ ... href: String, ... }); </script> ... <template> <Link :href="href&quo ...

javascriptvue.jsvue-componentvuejs3vue-props

Is there a way to insert an attribute in HTML without simply appending it to the end of the tag?

I've been working on incorporating the code snippet below that I found in an angularjs table sort function. In the code, you can see the ts attributes being added to the html. However, this method is not suitable for hosting on Salesforce. Can anyone ...

htmlangularjssalesforceapex

Working with AngularJS: binding data to dynamically appended HTML elements using JavaScript

Is there a way to connect an angular event and model to an html element that is added through javascript code? To see my code, click here: https://jsfiddle.net/hq7qk48n/13/ <div ng-app> <div ng-controller="MyController"> <input ...

javascriptjqueryhtmlangularjs

Issue with Importing AdapterDateFnsV3 in MUI?

I have the listed npm packages installed: "@mui/icons-material": "^5.15.19", "@mui/lab": "^5.0.0-alpha.170", "@mui/material": "^5.15.19", "@mui/system": "^5.15.15", "@mui/ ...

javascriptmaterial-uimui-xmui-x-date-picker

"Utilizing images within an iframe: A step-by-step guide

I'm trying to integrate an iframe into a phone image with a transparent background. However, I am unsure how to effectively mask the iframe so that it only appears within the boundaries of the phone image. .phone { display: block; position: r ...

htmlcss

Error: The specified module 'sqlite' does not have an export named 'default' as requested

Having some difficulty with importing sqlite into my project. When I add this line: import sqlite from 'sqlite'; An error occurs: file:///D:/WebPro/WebProg/cwCode/dbInteract.js:2 import sqlite from 'sqlite'; ^^^^^^ SyntaxError: ...

javascriptnode.jssqlitenpm

Capturing all response requests from the main process in Electron: A step-by-step guide

I am looking to retrieve the responses for all requests made in my electron app from the main process. In this image, it shows that the desired response can be found in the Response tab rather than the Headers tab on Chrome Dev Tools. Instead of using a ...

javascriptnode.jsnpmelectron

Transitioning the implicit width

Using implicit width, which involves adding padding to an element containing text to give the parent container a specific but unstated width, can be quite elegant. However, it poses challenges when it comes to transitions. Is there a way to achieve a trans ...

htmlcsscss-transitions

What is the best way to restore a component's state to its default settings when it receives new props?

I have a Next.js project in development with a custom Layout already set up. I want the header component to reset whenever a new page is navigated to, so that the menu reverts back to its default state. Does anyone know how I can achieve this? import { F ...

javascriptreactjsnext.js

Using Node.js to integrate Stripe payment method

After successfully implementing a stripe payment method with node and express, I encountered some issues. Although the payment runs smoothly and returns a success message, the customer is not being added to the list of stripe customers. Additionally, my no ...

javascriptnode.jsexpressstripe-paymentsmern

Alter the app's entire background color in React.js with a button click

I am facing an issue with changing the background color of my entire React App when a button is clicked. Currently, I am able to change the color of the button itself but not the background. I have imported the App.css file into my project and I am looking ...

javascriptcssreactjs

Error: Unable to access the 'location' property because it is undefined

Having trouble uploading a product along with an image using AWS S3 (Multer and MulterS3). Every time I try it in Postman, I get the error message "TypeError: Cannot read property 'location' of undefined" specifically pointing to the line where t ...

javascriptangularjsnode.jsamazon-web-servicesangular5

next-redux-wrapper is being invoked repeatedly and experiencing multiple calls to HYDRATE

I'm embarking on a new Next.js project, transitioning from a standard React app to a Next.js application. Our plan is to utilize Redux Toolkit for global state management and incorporate server-side rendering. During this process, we discovered the ne ...

javascriptreactjsreact-reduxnext.jsnext-redux-wrapper

What is the method to define a loosely typed object literal in a TypeScript declaration?

We are currently in the process of creating TypeScript definitions for a library called args-js, which is designed to parse query strings and provide the results in an object literal format. For example: ?name=miriam&age=26 This input will produce th ...

javascripttypescripttypescript-typings

Adjusting the transparency of TabBadge in Ionic 2

I am currently working on a project that involves tabs, and I'm looking to update the style of the badge when the value is 0. Unfortunately, I am unsure how to dynamically change the style of my tabs or adjust the opacity of the badge in the style. M ...

cssangulartypescriptsassionic2

What is the best way to securely transfer data from a Node/Express server to the client using JavaScript, ensuring sanitized HTML and preventing cross-site scripting (X

What is the best method to securely pass data from an Express backend to a client-side JavaScript in order to render it in the DOM using client-side rendering, while also allowing sanitized whitelist HTML and preventing XSS attacks? For example, if the No ...

javascripthtmlexpressxsshtml-sanitizing

The margin-left property is not functioning properly on the second <td> element

Displaying a table with two cells positioned next to each other: <table> <td disabled>Content for the first cell</td> <td style="margin-left:100px;" disabled>Content for the second cell</td> </table> Despite us ...

htmlcsshtml-table