Hey everyone, I'm facing an issue trying to remove the class attribute from the parent element of an input field.
Here is the HTML snippet:
<div class="settings">
<div class="settings-content">
<ul class="general-settings">
<li>
<label>Name</label>
<span class="hidden_elm">
<form class="name_form" id="myform" method="post" action="#">
<ul>
<li><label>First</label><input class="input-log" type="text" name="firstname" placeholder="First Name..."></li>
<li><label>Last</label><input class="input-log" type="text" name="lastname" placeholder="Last Name..."></li>
<li><hr></li>
</ul>
<input class="log-btn success-btn" type="submit" value="Save">
<input class="log-btn close_current" type="reset" value="Cancel">
</form>
</span>
</li>
</ul>
</div>
</div>
Here's the jQuery code:
$(document).ready(function(){
var hide_elm = $('span.hidden_elm');
var clickon_elm = $('ul.general-settings > li');
var ul_backgrounf = $('ul.general-settings');
clickon_elm.on('click',function(){
//remove the class if it exists
$('.show_elm').removeClass('show_elm');
$('.current_elm').removeClass('current_elm');
//add the class attr to the current element
$(this).addClass('current_elm');
$(this).children('span').toggleClass('show_elm');
//$(this).css({'height':'auto'});
});
$('.close_current').on('click',function(){
//$(this).removeClass('current_elm');
$('.current_elm').removeClass('current_elm');
$(this).parent('span').removeClass('show_elm');
});
})
CSS styles:
div.settings{
margin-top: 10px;
}
ul.general-settings{
width: 100%;
/*padding-top:8px;*/
padding-bottom:8px;
border-top: 1px solid #ccc;
/*background-color: #f2f2f2;*/
/*border-bottom: 1px solid #ccc;*/
}
ul.general-settings > li{
width: auto;
padding: 1px;
margin: 0 auto;
height: 30px;
display: block;
line-height: 1em;
vertical-align: middle;
border-bottom: 1px solid #ccc;
}
/** change style of the li element of the current show_elm **/
li.current_elm{
background-color: #f2f2f2 !important;
height: auto !important;
cursor: default !important;
}
ul.general-settings > li:hover{
cursor: pointer;
background-color: #f2f2f2;
}
ul.general-settings > li > label{
position: relative;
float: left;
width: 20%;
text-align: left;
padding: 10px 5px;
color: #000;
font-size: 1em;
font-weight: 700;
}
ul.general-settings > li > label:hover{
cursor: pointer;
}
/** show the hidden element **/
ul.general-settings > li > span.show_elm{
margin: 0 auto;
padding: 0;
display: inline-block;
width: 70%;
padding: 5px 0;
}
span.hidden_elm{
display: none;
}
span.hidden_elm > form{
margin:0 auto;
padding: 0;
display: inline-block;
}
span.hidden_elm > form > input.log-btn{
top: 0;
right: 0;
float: left;
border: none;
cursor: pointer;
margin: 0 3px 0 0;
}
span.hidden_elm > form > ul{
width: 100%;
}
span.hidden_elm > form > ul > li{
display: block;
margin-bottom: 5px;
text-align: right;
width: 388px;
}
span.hidden_elm > form > ul > li > label{
padding-right: 5px;
}
hr{
background: #d9d9d9;
border-width: 0;
color: #d9d9d9;
height: 1px;
}
So, my goal is to eliminate the class:current_elm and class:show_elm when clicking on the cancel button which has a type of input:type=reset