jQuery:隐藏 <label> 中的*仅*文本

Question

我有以下从 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>

我试图隐藏 Name和Email <label> 内的文本像这样的字段:

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

但是当我这样做时，它会删除 input还来自 DOM 的字段

有没有办法可以隐藏文本，同时保留文本字段？

Answer 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>