如何在另一個元素出現時移除元素？

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>