使用jquery从祖父母中删除class属性

delete class attribute from the grandparent with jquery

本文关键字：删除 class 属性 祖父母 jquery 使用      更新时间：2023-09-26

大家好，我在从输入的父级中删除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

尝试使用parents()

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

如果我了解您的需求，您可以尝试以下操作：

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