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