Currently, I am in the process of working on a project with 2 distinct pages:
- Index
- Settings
On the Settings page, I have implemented a button to close an element and hide it. However, I am encountering an issue where I want the elements on the Index page to be hidden when I click on close in Settings and then select save. Unfortunately, I have been unsuccessful in achieving this functionality so far. Any assistance or guidance on how to accomplish this would be greatly appreciated.
If you would like to review the code I have developed for this scenario, please visit: http://codepen.io/crazycoder775/pen/pNYJOw
$(".list_sbar li").click(function(e) {
if ($(this).outerWidth() - 34 <= e.offsetX)
$(this).remove();
});
$(".list_sbar li").click(function(e) {
if ($(this).outerWidth() - 34 <= e.offsetX)
$(this).remove();
});
$(document).ready(function(){
$("#hide").click(function(){
$(".test1").hide();
});
$("#show").click(function(){
$(".test1").show();
});
});
$(document).ready(function(){
$("#hide2").click(function(){
$(".test2").hide();
});
$("#hide3").click(function(){
$(".test3").hide();
});
});
Within the provided code snippet, there are 3 divs and 2 close buttons. By clicking on any of the close buttons, the corresponding div will be appended with a hide class.