別の要素が表示されたら、要素を削除するにはどうすればよいですか？

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>

あなたはメールアドレスとして入力し、「テスト」をしようとすると、警告メッセージと手がかりメッセージが混在しています。私は、警告メッセージが表示されたときに手がかりメッセージ（「迷惑メールではありません！」）を隠したいと思います（「間違ったメールアドレス」）

純粋なCSSでこれを行うべきか、 Jqueryで

はinputがinvalidまたはvalidクラスを取得しているので、あなたはhide-on-input-messageクラスを持つすべての項目を隠し、次のCSSルールを追加することができ、あなたの助けのために

よろしく、

アクセル

Answer 1

をありがとう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>