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

Question

我使用 MaterializeCSS 来显示电子邮件表单，当电子邮件验证失败时，我想隐藏一个 "clue" 元素。

.input-field .clue {
 color: #666;
 font-family: 'Nothing You Could Do', cursive;
 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" 作为电子邮件地址，警告信息和提示信息会混在一起。我想在警告信息出现时隐藏线索信息("We don't spam, never !")("wrong email adress")

我不知道我是否应该在纯 CSS 或 Jquery 中执行此操作。

感谢您的帮助，

此致，

阿克塞尔

Answer 1

由于 input 得到 invalid 或 valid class，您可以添加以下 CSS 规则，它隐藏所有具有 [=16= 的项目] class 位于同一个 input 之后 input-field:

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

更新的代码段：

.input-field .clue {
 color: #666;
 font-family: 'Nothing You Could Do', cursive;
 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>

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

How can I remove a element when another appear?

validation

jquery

materialize