如何在另一个元素出现时移除元素？

Question

我使用MaterializeCSS来显示电子邮件表单，并且当电子邮件验证失败时，我想隐藏一个“线索”元素。

.input-field .clue { 
 
\t color: #666; 
 
\t font-family: 'Nothing You Could Do', cursive; 
 
\t margin-top:-0.8rem; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script> 
 

 
<form id="testForm"> 
 
<div class="input-field"> 
 
<input id="email" type="email" class="validate" required="" aria-required="true"> 
 
<label for="email" data-error="wrong email adress" data-success="right">Email</label> 
 
<p id="clue-email" class="clue">We don't spam, never !</p> 
 
</div> 
 
</form>

如果您尝试输入“test”命名的电子邮件地址，报警信息和线索的消息被混合。当出现警告信息（“错误的电子邮件地址”）时，我想隐藏线索消息（“我们不会发送垃圾邮件，从不！”）

我不知道我是否应该在纯CSS或在Jquery中。

感谢你的帮助，

问候，

阿克塞尔

Answer 1

由于input得到invalid或valid类，你可以添加以下CSS规则，其中隐藏有hide-on-input-message类是所有项目位于input之后input-field：

.input-field input.invalid ~ .hide-on-input-message, 
.input-field input.valid ~ .hide-on-input-message 
{ 
    display: none; 
} 

更新片段：

.input-field .clue { 
 
\t color: #666; 
 
\t font-family: 'Nothing You Could Do', cursive; 
 
\t margin-top:-0.8rem; 
 
} 
 

 
.input-field input.invalid ~ .hide-on-input-message, .input-field input.valid ~ .hide-on-input-message { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script> 
 

 
<form id="testForm"> 
 
<div class="input-field"> 
 
<input id="email" type="email" class="validate" required="" aria-required="true"> 
 
<label for="email" data-error="wrong email adress" data-success="right">Email</label> 
 
<p id="clue-email" class="clue hide-on-input-message">We don't spam, never !</p> 
 
</div> 
 
</form>