Ways to implement CSS on a parent element by manipulating its child element

Hello, I am looking to apply CSS to a parent element based on its child.

<li>
    <div>
        <label>
            <b style="display: none;">Name and Date of Event*: </b>
        </label>
    </div>
</li>

I want to hide the list item, but I am unsure how to achieve this with CSS.

Currently, I am using:

jQuery("b:contains('Name and Date of Event*:')").css('display','none');

However, this only hides the <b> tag. I would like to hide the entire parent li element.

Is it possible to hide a parent element based on a child? If so, how can I achieve this?

javascriptjqueryhtmlcss

Answer №1

Learn how to use the .closest() method in jQuery. This function allows you to specify a selector and locate the nearest ancestor element.

$('#btn').on('click', function(){
  $("b:contains('Name and Date of Event*:')").parents('li').css('display','none');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  Li Content
    <div>
        <label>
            <b style="display: none;">Name and Date of Event*: </b>
        </label>
    </div>
</li>
<button id="btn">Hide li</button>

Have you ever wondered why you should choose .closest over .parents ?

.closest()

  1. Starts with the current element
  2. Moves up the DOM tree until it identifies a match for the specified selector
  3. The resulting jQuery object includes zero or one element for each original element

.parents()

  1. Starts with the parent element
  2. Journeys up the DOM tree to the document’s root element, adding every ancestor element to a temporary collection; then filters that collection based on an optional selector
  3. The resulting jQuery object includes zero or more elements for each original element

Answer №2

You have the option to use either .parents() OR .closest()

Give this a try

jQuery("b:contains('Name and Date of Event*:')").parents('li').css('display','none');

Alternatively,

jQuery("b:contains('Name and Date of Event*:')").closest('li').css({'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

"TypeScript Static Classes: A Powerful Tool for Struct

In my TypeScript code, there is a static class with an async build method as shown below: export default class DbServiceInit { public static myProperty: string; public static build = async(): Promise<void> => { try { ...

javascripttypescriptstatic-methods

The system encountered an error when attempting to convert the data '19-10-2002' into a date format

I am trying to pass a date parameter in the format (dd-MM-yyyy) and then convert it into the format (yyyy-MM-dd) before sending it via API. Here is my code: convert(date:string){ date //is in the format(dd-MM-yyyy) date = formatDate(date , " ...

javascriptangulartypescriptdate

Utilizing the .toLocaleString() method in a Node.js environment

While working on a small helper method to format numbers into a valid money format ($xx,xxx.xx) using .toLocaleString(), I encountered an issue. It works perfectly fine in Chrome but fails when used in Node.js. For example: var n = 6000 console.log( n.to ...

javascriptnode.js

The 'HTMLButtonElement' type cannot be assigned to a 'string' type in TypeScript, error code: 2322

In my code, there is a function that generates "tr" and "td" elements within a table. Using a For Loop, I successfully insert "td" elements into "tr". While everything is working as expected, Visual Studio Code is throwing an error. Below is the code snip ...

javascripthtmlinnerhtml

Send a request for a multidimensional array to a PHP file using AJAX

I am in need of an array containing subarrays. Within my ProcessWire page, there are pages and subpages with various fields. I have organized this information into an array of arrays as shown below. <?php $allarticles = $pages->find("template=a ...

javascriptphpajaxprocesswire

Arrange jQuery UI elements in descending order

I need to rearrange a list in descending order, starting from the highest value down to the lowest. The values are currently listed as 10,9,8,7,6,5,4,3,2,1 and I need to update the data-ids accordingly. jQuery('.photos').sortable({ stop: f ...

javascriptjqueryjquery-uishort

JavaScript object conversion to Java Model is proving to be a challenge

When looking at my Spring controller and client-side Javascript code, I noticed that the Javascript object is having trouble reaching the Spring controller in Object form. Here is a snippet of my Controller code: @RequestMapping(value = "/addRating", meth ...

javascriptjavaajaxspring

What is the correct way to assign a property to a function's scope?

Lately, I've been delving into Typescript Decorators to address a specific issue in my application. Using a JS bridge to communicate TS code between Android and iOS, we currently define functions as follows: index.js import foo from './bar' ...

javascripttypescripttypescript-decorator

What is the process for configuring a registry for a namespaced package using yarn?

Experimenting with yarn as a substitute for npm has been quite interesting. With npm, we usually rely on both a private sinopia registry and the official repository for some namespaced packages, since sinopia doesn't support namespaces. My .npmrc fi ...

javascriptnpmyarnpkgsinopia

Tips on populating a React table using an array of objects

I have encountered a simple problem that I haven't been able to solve yet. The first block of code seems to be working fine, but the second one is only producing empty table cells. Can someone explain why this is happening and provide a way to populat ...

javascriptarraysreactjsfunctionobject

Steer clear of using absolute positioning in Material-UI and React for better styling and layout

Is there a way to achieve the same layout without using position: absolute for the "Hello There" button? I want to remove that CSS property while keeping the design intact. Any better suggestions? Feel free to check out my codesandbox: CODESANDBOX -----&g ...

cssreactjsmaterial-ui

The Vuetify v-img component fails to display images when using absolute paths

Having a bit of trouble here: I want to showcase an image using an absolute path in Vuetify with the v-img tag, but for some reason, it's not displaying. I attempted to use :src="require('path/to/img')", but it throws an error saying "This ...

htmlvue.jsvuetify.js

Implementation of arrays with dynamic textboxes insertion

Looking for a dynamic array output like this: tableNames = [ ["string1", "string2"...], ["string", "string"...] ]; Looking for assistance with AngularJS code design to achieve this structure, where the values of the strings are entered through te ...

javascriptangularjsarraysjson

Expanding your JavaScript skills: Tackling nested object key and value replacements

I am looking to manipulate the values of a nested object using JavaScript. The structure of the object is outlined below. let jsonObj = { "service":[ { "name":"restservice", "device&quo ...

javascriptjsonobject

obtain the content of a TextField element

In my React component that utilizes MaterialUI, I have created a simple form with a text field and a button: export default function AddToDo() { const classes = useStyles(); return ( <div style={{ display: "flex" }} ...

javascriptreactjsmaterial-ui

Waiting for POST request to be executed once data is inserted

This was a new experience for me; I took a break from working on the project for a while, and suddenly all POST routes stopped functioning. However, the GET routes were still working perfectly fine. After extensive debugging, I discovered that removing the ...

javascriptnode.jsajaxexpresspost

Instructions for dividing a screen into two halves, either with a 20/80 or 30/70 split, using HTML

I've set up my HTML structure like this: <div class="row"> <div class="col"> <div class="leftside"> ...content for leftside goes here... </div> </div> <di ...

htmldjangobootstrap-4

Interactive Bootstrap Modals

Is it possible to create a "page" viewing experience within a bootstrap modal? This type of user interface flow is common in many mobile apps, but after reviewing Bootstrap's components, I'm unsure how to implement this or if it's even supp ...

htmltwitter-bootstrapbootstrap-4single-page-application

Change the information displayed on buttons when clicked and provide options for users to navigate between different

In order to change the content when a button or number is clicked, you can utilize the buttons "1,2,3,4" or the Next and Prev buttons shown in the snippet. Both methods allow access to the same article. If you want to switch between articles using the Next ...

javascripthtmljquerycssbutton

I'm running into an issue where my API calls are being duplicated

Every time I refresh the page, the network preview displays a duplicate API call to (ipaddress)/(portnumber)/admin/user-group?page=1&page_size=10&query= twice. I've tried making changes to the useEffect() and handleSearch() functions without s ...

javascriptreactjstypescriptnext.js