Is it possible to alter the css twice through the action of clicking on two individual buttons

One feature I have in my interface allows users to click on the edit button to bring up borders and change the background color of other divs. Once the edit button is pressed, it is replaced by cancel and save buttons. The goal is for the borders and background colors to revert back to normal when either the cancel or save buttons are clicked.

So far, I have successfully implemented the changes to the divs when clicking on edit, but I am facing an issue where the changes do not revert back when clicking cancel or save. Strangely, I am using the same jQuery function for all three actions.

//show lines when edit is clicked
$(".editbutton").click(function() {
    $(this).parent().find(".material_input").css("border-bottom", "1px solid #ccc").css("background-color", "#fafafa");
});

//hide lines when cancel or save is clicked
$(".label-container button").click(function() {
    $(this).parent().find(".material_input").css("background-color", "#fff");
});

Although the second function does not include the border aspect yet, my main focus currently is getting the background back to white first.

Edit: It appears that there may be an issue with the second function accessing the DOM correctly, as this task seems manageable on Codepen. Any assistance in resolving this would be greatly appreciated.

Below is the hierarchy of relevant classes in the DOM:

.parent > .editbutton

.parent > .button-wrap > .label-container

.parent > .section > .fields > .material_input

Answer №1

After reviewing the revised question, switching $(this).parent() to $(this).parents('.parent') within the click event listener for the save or cancel button appears to be the solution.

Answer №2

To enhance your code, consider utilizing classes instead of the .css function. This will allow you to easily remove a class when clicking "cancel," or add additional functionality based on whether a certain class is present.

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

Python tutorial: Executing onclick values with a click

I'm currently working on writing some Selenium Python code and I have a question. The website I am testing has multiple time slots available, and I am attempting to simulate a mouse click specifically geared towards the 8:30-11:30 timeslot. Below is ...

Adjust the position of the footer up or down based on changes in page content height

If I have jQuery at my disposal, how can I achieve the following task? There is a div on the page with dynamic content and no fixed height. The height of this div changes as users type and content appears or disappears accordingly. Although everything is ...

Pass the callback function `cb_func` as a parameter to the `foobar` function when calling it in the `onclick`

I have an element that I want to trigger an onclick event with a callback function. Here is the code snippet: function cb_func() { alert("hello world!"); } function foobar(i, cb) { // do something if (cb != undefined) cb(); } onclic ...

Unable to access Bootstrap nav link

There seems to be an issue with a link inside the Bootstrap nav-menu. The link is not opening when clicked on. https://i.sstatic.net/lrXmD.jpg I am facing trouble with the Cart file as it does not open when I click on the Cart hyperlink. I have double-ch ...

Any ideas for handling ProtractorJS timeouts while clicking an element?

The Issue at Hand I am currently facing a challenge with clicking a straightforward 'New Booking' button in my Angular 5 Material 2 Application. The code snippet for the button is as follows: <button _ngcontent-c9="" class="mat-menu-item" ma ...

Invoke Javascript through CSS selector

On my webpage, I have implemented a mousemove-mask feature that was inspired by an existing codepen. However, there is one significant issue that I can't seem to resolve on my own. Despite my attempts to fix it, I believe someone with more expertise c ...

Using Express.js to transform req.body into a POST encoded string

I need to convert the req.body object into a POST encoded string using the express.bodyParser middleware. Is there a way to achieve this? For example: Name: Jane Doe Age: 30 City: Los Angeles Should become: Name=Jane+Doe&Age=30&City=Los+Angeles ...

What is the best way to send a parameter to a mousewheel event?

for (var i = 0; i < 10; i++) { $('#content-scroll' + i).mousewheel(function(event, delta) { if (delta > 0) sliderUp(i - 1); else if (delta < 0) sliderDown(i - 1); return false; // prevent default }); } I am facing an iss ...

What is the best approach for managing multiple socket rooms?

I have been working on developing a chat application that supports multiple chat rooms. After watching several tutorials, I have devised a way to handle this. const io = require("socket.io")(http); io.on("connection", (socket) => { ...

Toggle a v-if variable within the created() lifecycle hook in the VUE 3 framework

I'm working on a component with 3 buttons, where initially only 2 are visible. <template> <button v-show="!showLogout" @click="login('google', 'profile, email')"> Google </button> &l ...

The Django framework does not apply color to the Bootstrap Navbar as expected

I'm currently working on building an E-Commerce Website using Django. I have implemented a Bootstrap navbar, but the CSS styles that I obtained from this source are not functioning properly when placed within the {%block css %} tag. I have attached t ...

Htaccess rules not translating directory-style URLs into query-style URLs

I am currently working on a basic htaccess file to convert directory-style URLs to query-style. For example: a. /public_html/main/folder1/folder2 ... etc b. /public_html/main.php?1=folder1&1=folder2 Despite my efforts with various regex and rewrite r ...

Which is better for creating contour graphs: JavaScript or PHP?

I need to create a scientific graph for a web application that displays temperature data based on time and depth coordinates. You can view an example here : I have time and depth coordinates, and I want to represent temperature using color in the graph, ...

Encountering an error stating "ngbCollapse" is not a recognized property of "div" after relocating components to a sub module

Error compiler.js:215 Uncaught Error: Template parse errors: Can't bind to 'ngbCollapse' since it isn't a known property of 'div'. ("][ngbCollapse]="isHidden" In the process of organizing my code, I encountered an issue ...

Do the last block in the table occupy the remaining space in the row?

Trying to create an HTML email calendar and struggling with getting the last td to fill the remaining space without affecting the width of other rows. Is there a way to increase the width of just the 4th block on the last row to fill the empty space? Here ...

What is the best way to eliminate a notice in PHP related to a checkbox?

I'm encountering an issue when submitting a form without selecting the checkbox. In this case, a NOTICE is displayed. Can someone please advise on how to prevent this from happening? I find it interesting that when using a text input instead of a chec ...

Checking for the winner in a JavaScript tic-tac-toe game

Here is the code snippet for a tic-tac-toe game: $(".square").one("click", function() { if( gameOver == false ) { sq1 = $("#sq1").text(); // captures the value of squares after being clicked. sq2 = $("#sq2").text(); //and so on for all 9 squares } / ...

How can the color of the <md-toolbar> be customized?

Here is a glimpse of how my code appears on CodePen: I am aiming to have the background color of "Sidenav Left" match that of "Menu Items", which is designated by the class .nav-theme { background-color: #34495E } I attempted to override it like this ...

How to implement a jQuery datepicker in Angular with two distinct date formats

I am utilizing a jquery ui datepicker in my angular application, The implementation looks like this: app.directive('dwdatepicker', function() { return { restrict: 'A', require : 'ngModel', link : ...

Unlocking the Secrets of AnimatedInterpolation Values

I have a question about how to access the value of an AnimatedInterpolation in react-native without resorting to calling private code. To achieve this, I first create an animated value and then wrap it in an interpolation like so: animated = new Anima ...