jQuery：从 <label> 隐藏 *only* 文本答案

【问题标题】：jQuery: Hiding *only* text from <label>jQuery：从 <label> 隐藏 *only* 文本
【发布时间】：2020-03-02 19:24:31
【问题描述】：

我有以下从 WordPress 插件输出的标记

<div class="emaillist">
    <form action="#" method="post">
        <div class="es-field-wrap">
            <label>Name*<br>
                <input type="text" name="name" placeholder="Name" value="" required="" class="form-control">
            </label>
        </div>
        <div class="es-field-wrap">
            <label>Email*<br>
            <input class="form-control" type="email" name="email" value="" placeholder="Email" required=""></label>
        </div>                              

        <input type="submit" name="submit" value="Subscribe">
    </form>
</div>

我试图在 <label> 字段中隐藏 Name 和 Email 文本，如下所示：

$('.form-blog-notify label').text('')

但是当我这样做时，它也会从 DOM 中删除 input 字段

有没有一种方法可以在保留文本字段的同时隐藏文本？

【问题讨论】：

您要删除文本还是让它不可见？

标签： jquery html dom hide

【解决方案1】：

您需要获取第一个文本节点，然后将其删除。在哪里可以使用contents() 方法获取包括文本节点在内的所有子节点。

$('label').each(function() {
  $(this).contents().first().remove()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="emaillist">
  <form action="#" method="post">
    <div class="es-field-wrap">
      <label>Name*<br>
                <input type="text" name="name" placeholder="Name" value="" required="" class="form-control">
            </label>
    </div>
    <div class="es-field-wrap">
      <label>Email*<br>
            <input class="form-control" type="email" name="email" value="" placeholder="Email" required=""></label>
    </div>

    <input type="submit" name="submit" value="Subscribe">
  </form>
</div>

【讨论】：

【解决方案2】：

您可以将字体大小设置为0。现在文本不显示，但仍然在 HTML 中。

.es-field-wrap label {
  font-size: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="emaillist">
  <form action="#" method="post">
    <div class="es-field-wrap">
      <label>Name*<br><input type="text" name="name" placeholder="Name" value="" required="" class="form-control"></label>
    </div>
    <div class="es-field-wrap">
      <label>Email*<br><input class="form-control" type="email" name="email" value="" placeholder="Email" required=""></label>
    </div>
    <input type="submit" name="submit" value="Subscribe">
  </form>
</div>

如果你想删除文本，那么jQuery更好。

$(function() {
  $(".es-field-wrap label").each(function(i, el) {
    $(el).contents()[0].remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="emaillist">
  <form action="#" method="post">
    <div class="es-field-wrap">
      <label>Name*<br><input type="text" name="name" placeholder="Name" value="" required="" class="form-control"></label>
    </div>
    <div class="es-field-wrap">
      <label>Email*<br><input class="form-control" type="email" name="email" value="" placeholder="Email" required=""></label>
    </div>
    <input type="submit" name="submit" value="Subscribe">
  </form>
</div>

【讨论】：