jQuery: скрытие * только * текста от <label> - PullRequest
Новая
       14

jQuery: скрытие * только * текста от <label>

1 голос
/ 02 марта 2020

У меня есть следующая разметка, которая выводится из плагина 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

Есть ли способ скрыть текст, оставляя текстовые поля на месте?

Ответы [ 2 ]

2 голосов
/ 02 марта 2020

Вам нужно получить первый текстовый узел, а затем удалить его. Где вы можете использовать метод 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>
0 голосов
/ 02 марта 2020

Вы можете установить размер шрифта 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>
...