удалить атрибут класса от дедушки и бабушки с помощью jquery

Question

Привет, ребята, у меня проблема с удалением атрибута class от грандиозного родителя ввода. Вот мой HTML:

<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> 

JQuery:

$(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:

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; 
} 

, поэтому я хочу, чтобы удалить class:current_elm и class:show_elm После нажатия на кнопку отмены, которая является input:type=reset

Answer 1

Попробуйте использовать parents()

 $('.close_current').on('click',function(){ 
     $(this).parents('.current_elm').removeClass('current_elm'); 
     $(this).parents('span').removeClass('show_elm'); 
    }); 

Answer 2

Если я понимаю, что вам нужно, вы можете попробовать это:

$("input:reset").on("click", function() { 
    $(this).parents('span').removeClass("show_elm current_elm"); 
});