如何仅隐藏标签内的文本而不隐藏其他html元素

Question

我想在标签标签中隐藏文本，而不是输入文本。我想这样做而不更改html结构。我想使用css3甚至jquery实现此目的

这是html代码：

<div class="es-field-wrap">
<label>Email*<br><input class="es_required_field es_txt_email" type="email" name="email" value="" placeholder="Your email address" required=""></label>
</div>

我尝试了这个但是没有运气

.es-field-wrap+label { display:none; }

.es-field-wrap > label { display: none; }

Answer 1

CSS

子元素visibility: visible仍然在父元素中可见visibility: hidden。或者您可以制作标签color: transparent，但如果用户通过选择突出显示它，则可以显示标签。

顺便说一句，.es-field-wrap+label必须有外面的标签.es-field-wrap才能工作。

这两种技术都在演示 1 中。

jQuery/JavaScript

当涉及文本时，缺少 jQuery。JavaScript 的能力要强大得多。

$('.es-field-wrap label')[0]...

上面的代码是一个 jQuery 对象，它被取消引用为一个普通的 JavaScript 对象（注意[0]）。

.childNodes[0].remove()

.childNodes是一个普通的 JavaScript 属性，它不仅可以获取标签的子元素，还可以获取文本。Email*实际上是 label 因此 的第一个子节点.childNodes[0]。该.remove()方法非常不言自明。

有关此 jQuery/JavaScript 语句，请参阅演示 2。

演示 1 - CSS 隐藏

$('.es-field-wrap label')[0]...

.childNodes[0].remove()

演示 2 - jQuery/JavaScript 删除

.es-field-wrap label {
  visibility: hidden
}

.es-field-wrap label input {
  visibility: visible
}

.es-field-wrapA label {
  color: transparent;
}

<div class="es-field-wrap">
  <label>Email*<br><input class="es_required_field es_txt_email" type="email" name="email" value="" placeholder="Your email address" required=""></label>
</div>

<div class="es-field-wrapA">
  <label>Email*<br><input class="es_required_field es_txt_email" type="email" name="email" value="" placeholder="Your email address" required=""></label>
</div>

Answer 2

尝试这个

电子邮件*

<div class="es-field-wrap">
<label>Email*<br><input class="es_required_field es_txt_email" type="email" name="email" value="" placeholder="Your email address" required=""></label>
</div>

//split text to <br> tag
    var t = $(".es-field-wrap > label").html().split("<br>");
    //set secont part of test in label
    $(".es-field-wrap > label").html(t[1]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="es-field-wrap">
<label>Email*<br><input class="es_required_field es_txt_email" type="email" name="email" value="" placeholder="Your email address" required=""></label>
</div>