Removing a CSS class using JQuery

Within my website layout, I have a div that is dynamically included using PHP. This div is inserted in two different locations, each inside its own parent div.

<div id="parent_div">
    <div id="contact_details_div" class="contact_details_div sameheight">
        <h3>Some Text</h3>
        Some additional Text    
    </div>
    <div id="contact_div" class="contact_div sameheight">
        Even more text
    </div>
</div>

The parent div can have one of two unique IDs.

I am looking for a way, either through jQuery or vanilla Javascript, to remove the 'sameheight' class when the parent div has a specific ID. The following code successfully removes the class but from both parent divs:

$( "#contact_details_div" ).removeClass( "sameheight" )
$( "#contact_div" ).removeClass( "sameheight" )

I believe I need an IF statement to make this conditional, however, I am uncertain about how to structure it.

Answer №1

When working with jQuery selectors, they function similarly to CSS selectors. You can utilize a parent-child selector for your needs: (If you only want the class applied within #parent_two and not #parent_one, you can do this:

$( "#parent_one #contact_details_div" ).removeClass( "sameheight" );

However, if the sameheight class is specifically used for applying CSS styles, it might be more efficient to make your CSS rules more specific so that they only apply when the element is a child of another div:

#parent_two .sameheight{...}

In this case, you won't need JavaScript.

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

Discovering elements in jQuery selected within Selenium

I'm completely new to Selenium. The developers on our website utilized jQuery chosen select for filling drop-downs. I am trying to input specific text and then select the matching text that I entered. Here is what I attempted: [FindsBy(How = How.XPa ...

Attempting to use tabs within a tab does not function correctly

Visit the CodePen link here This is the codepen example. <div class="row"> <div class="col s12"> <ul class="tabs2"> <li class="tab col s3"><a href="#test1">Test 1</a></li> <li class=" ...

Issues with window.location.href on iOS devices are causing functionality problems

Problem: The ajax function is working correctly on Windows and Android devices, but it fails to work on iOS devices. It shows an alert message on Windows and Android, but nothing happens on iOS. I have tried using window.location.href, location.href, and l ...

React table row render error

I am facing an issue with my React code: var PostRow = React.createClass({ render: function(){ var loading = <tr><td>one row</td></tr>; return( {loading} ) } }); An error message is bein ...

The server's file URLs are modified within the page source of a WordPress site

I've been attempting to integrate Adsense code into a WordPress blog at demonuts.com. I placed the Google code in the TEXT WIDGET provided by WordPress. However, upon running the website, I noticed that the URLs for .js, .css, or .png files are being ...

Processing requests asynchronously using AJAX

I am facing an issue with my website. Here are the pages causing trouble: /index.php <- session_start() /includes/functions.php /modules/feedback.php <- read some $_SESSION /gui/savefeedback.php <- read some $_SESSIO ...

Tips to retrieve an Angular `value` from outside the module

customConfig.js angular.module("steam") .value("customConfig", { baseurl: "http://dev-back1.techgrind.asia/" }); To access the value outside the module, replace the " .." with customConfig.baseurl apiTest.js var frisby = require("frisby"); fris ...

What is the best method to verify chrome.runtime.onInstalled in Chrome extension testing?

Is there a way to test the chrome.runtime.onInstalled handler? I am developing a Chrome extension that utilizes chrome storage to store specific data. In my upcoming release, I plan on making changes to the data model in chrome storage. To do this effectiv ...

"Launch HTML in a new tab when a button is clicked with the help of AngularJS

In my AngularJS page, I have an edit button that when clicked, needs to open the edit page in another tab. Is it possible to achieve this using Angular? I want to maintain access to the same controller and data - how can I make this work? Does anyone hav ...

How can I maintain the selected state of checkbox and radio button in ReactJS after page refresh?

I am facing an issue with my multistep form that contains radio buttons and checkboxes from material UI. Although the data is stored correctly in state and local storage, when I move to the next page and then return, the selections appear unselected to the ...

How can an Embedded React + JSS component safeguard generic elements such as <button> and <p> from being affected by the page's style?

I am facing a challenge with a React component that is being embedded in various webpages, either through an extension or as a third-party tool. Most of the styling for this component is done using JSS, ensuring unique class names that cannot be overridde ...

Difficulty arranging these elements in CSS

I'm attempting to achieve the following: (The black box represents a signup/login section, the blue is a navigation bar, and the red is a header area with some text content) I'm trying to reach this outcome with the following CSS: @import url(/ ...

Pressing the 'Enter' key within a textarea in a JQuery

This question seems fairly straightforward. I have a text area where hitting "enter" submits the content. Even though I reset the text to "Say something..." after submission, the cursor continues to blink. Is there a way to require the user to click on ...

Automatically update and reload Express.js routes without the need to manually restart the server

I experimented with using express-livereload, but I found that it only reloaded view files. Do you think I should explore other tools, or is there a way to configure express-livereload to monitor my index.js file which hosts the server? I've come ac ...

It is not possible to assign values to a typed array buffer

Why is the value not being assigned as anticipated without any errors being thrown? const fs = require('fs'); let file = "data.dat"; let readStream = fs.createReadStream(file,{highWaterMark:1024*1024*128}) let stats = fs.statSync(file); let stre ...

Is it possible for consecutive json and jsonp requests to fail on Crossrider?

I am currently utilizing crossrider to develop a plugin that works across various browsers. Within my implementation, I have two consecutive AJAX requests (one JSON and one JSONP): The first request involves a JSON call for "login" which sets a brows ...

open a fresh modal by closing the existing modal using just one button

I am trying to implement a unique functionality in my bootstrap based project. I have one modal that I want to link to another modal, however, I am facing some challenges in achieving this. Currently, I am attempting to use the modal.close() and .modal(&ap ...

What is the syntax for populating an attribute on the same line as v-for in Vue.js?

I am currently working on a simple loop utilizing Vue to iterate over an array of objects and populate table rows. <tr v-for="user in users"> <td>{user.name}</td> <td>{user.id}</td> </tr> However, I also need to as ...

Customize CSS to target the first and last elements in a row using flexbox styling

I am facing a challenge in selecting the last element of the first row and the first element of the last row within a flex container. The setup involves a flex-wrap: wrap; for my flex container where all elements have flex: auto; with different sizes. Thi ...

access the input field value from the active tab using jQuery

Currently utilizing jquery tabs with a total of three tabs, each containing its own input text field. Interestingly, all three input fields share the same id="javanus", despite being on separate tabs. The challenge I'm facing is figuring out how to r ...