jQuery 从特定 div 内的所有输入、文本区域和选择元素中删除类答案

【问题标题】：jQuery remove class from all input, textarea and select elements inside a specific divjQuery 从特定 div 内的所有输入、文本区域和选择元素中删除类
【发布时间】：2017-02-07 11:18:51
【问题描述】：

jQuery 从所有输入、文本区域中删除类并选择特定 div 内的元素

如何使用 jQuery 从特定 div 内的所有输入、文本区域和选择元素中删除类。

我的 HTML 如下所示：

<h4 class="subHead02">Personal Statement
    <span class="action-container">
        <a href="javascript:;" class="edit-link"> 
            <i class="icon-edit"></i>
        </a>
    </span>
</h4>
<div class="profile_info_wrap">
    <input type="text" value="test" class="hide"/>
    <textarea class="hide" ros="3" cols="10">I am in text area</textarea>
    <select class="hide">
        <option>one</option>
        <option>two</option>
    </select>
    <input type="text" value="hello" class="hide"/>
</div>

当点击编辑链接（锚标记为 class=“edit-link”）时，我想从每个输入、文本区域中删除“隐藏”类，并选择 div 内的“profile_info_wrap”类元素。

尝试如下，

jQuery(this).parent().parent().next(".profile_info_wrap").find("select,textarea, input").removeClass('hide');

但它不起作用。任何帮助将不胜感激

【问题讨论】：

TYPO 它的 removeClass() 不是 remoceClass()，如果 this 指的是你的代码应该工作的锚。因此关闭它
“不起作用” - 还有更多细节吗？控制台中的错误（例如“remoceClass 未定义”？
$(this).parents(".subHead02").siblings(".profile_info_wrap").find("select,input, textarea").removeClass('hide');
您到底在哪里调用“尝试如下”？来自i的点击事件？
顺便说一句，你为什么不在.profile_info_wrap 上设置一个hide 类并通过css 选择器隐藏元素呢？减少 HTML 中的混乱。

标签： javascript jquery

【解决方案1】：

试试这个

 $('.edit-link').click(function(){
      $('.profile_info_wrap').find('.hide').each(function(){
           $(this).removeClass('hide');
      });
 });

您好，我是通过手机发帖的，所以可能有一些错字。

谢谢

【讨论】：

$('.profile_info_wrap').find('.hide').removeClass('hide') 可以工作，不需要each()

【解决方案2】：

不使用 parent 使用最接近的 as

$(this).closest('.subHead02').next(".profile_info_wrap").find("select,textarea, input").removeClass('hide');

同样将remoceClass 改成removeClass

您的锚标记的 OnClick 操作也只需添加 e.preventDefault();

$(function(){
  
   $('.edit-link').click(function(e){
     e.preventDefault();
     $(this).closest('.subHead02').next(".profile_info_wrap").find("select,textarea, input").removeClass('hide');
     
   })

})

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="subHead02">Personal Statement
    <span class="action-container">
        <a href="#" class="edit-link"> 
            <i class="icon-edit">hello</i>
        </a>
    </span>
</h4>
<div class="profile_info_wrap">
    <input type="text" value="test" class="hide"/>
    <textarea class="hide" ros="3" cols="10">I am in text area</textarea>
    <select class="hide">
        <option>one</option>
        <option>two</option>
    </select>
    <input type="text" value="hello" class="hide"/>
</div>

希望对你有帮助。它可以在下面的 sn-p 中使用。

【讨论】：

【解决方案3】：

你有拼写错误 removeClass() not remoceClass()

jQuery(this).closest('.subHead02').next(".profile_info_wrap").find("select,textarea, input").removeClass('hide');

【讨论】：