Jquery在焦点上从联系人表单中删除标签

我需要一些关于我的联系方式的帮助。我试图在用户单击框时自动删除标签，但我似乎不知道如何删除

这是HTML

<div class="six columns">
    <form>
        <div class="row">
            <div class="six columns">
                <label class="gfield_label" for="Name" style="display: block;">Name<span class="gfield_required">*</span>
                </label>
                <input type="text" id="Name" required class="mobile-four" />
            </div>
            <div class="six columns">
                <label class="gfield_label" for="Name" style="display: block;">Company</label>
                <input type="text" id="Name" required class="mobile-four" />
            </div>
        </div>
        <div class="row">
            <div class="six columns mobile-four">
                <label class="gfield_label" for="email" style="display: block;">Email<span class="gfield_required">*</span>
                </label>
                <input type="email" class="mobile-four" id="email" required />
            </div>
            <div class="six columns mobile-four">
                <label class="gfield_label" for="phone" style="display: block;">Phone<span class="gfield_required">*</span>
                </label>
                <input type="phone" class="mobile-four" id="phone" required />
            </div>
        </div>
        <div class="row">
            <div class="twelve columns mobile-four">
                <label class="gfield_label" for="message" style="display: block;">Message<span class="gfield_required">*</span>
                </label>
                <textarea id="message" cols="30" rows="3"></textarea>
            </div>
            <div class="three columns centered">
                <button id="contact-submit-btn" class="btn btn-block btn-danger">Contact us Now!</button>
            </div>
        </div>
    </form>

</div>

如果有人能帮忙，那就太好了。该页面位于beta.harbordev.com/contact.html

非常感谢

更新

$(function() {
    $('input, textarea').on('focus blur', function () {
        $(this).prev().toggle();
    });
});

---

这个建议似乎奏效了。它现在在网站上直播，但不知何故，消息字段（textarea）总是会随着选择的其他内容而消失，并且在未选择任何内容时也会消失。有人知道原因吗？

您可以尝试以下代码：

$('input, textarea').focus(function(){
      $(this).prev('label').hide();
});

试试这个：

$('input, textarea').keyup(function(){ 
 if($(this).val()=="")
      $(this).prev('label').show();
 else
      $(this).prev('label').hide();
});

---

这就是我想到的。我假设您试图在值存在时隐藏标签，如果它不存在，它将再次显示

$('input, textarea').focus(function(){
      $(this).prev('label').hide();
});

这并不依赖于HTML结构，如果您没有处理一致的标记，那么HTML结构是很好的

var $inputs = $(':input'), 
    $labels = $('label');

$inputs.on('input blur focus', function () {

  var $input = $(this),
      value = $input.val(),
      id = $input.attr('id'),
      $label; 

  $label = $labels.filter(function(){
    return $(this).attr('for') === id; 
  });

  $label.toggle(value.length === 0);

}).trigger('input');

下面是一个小演示：

---

PS：您可能还需要查看

占位符

属性。

是否尝试将其包装到文档中。准备好了吗？@LauraSchoebel请编辑主题中的类型；）@LauraSchoebel-是否有任何理由不使用

占位符

？是的，因为占位符用于表单解释（例如，请仅使用大写），而标签正是我要做的。这一个使所有标签在我单击任何内容之前消失。我的意思是，从技术上讲，这是朝着正确的方向迈出的一步，但仍然没有点击。我尝试了你的代码，但不幸的是没有任何改变。你的代码在某种程度上起了作用。看一看。但是，消息字段总是在单击其他内容时消失。你能帮我修复吗？什么消息字段，它们到底是如何消失的？进入beta.harbordev.com/contact.htmly你会明白我的意思的。

var $inputs = $(':input'), 
    $labels = $('label');

$inputs.on('input blur focus', function () {

  var $input = $(this),
      value = $input.val(),
      id = $input.attr('id'),
      $label; 

  $label = $labels.filter(function(){
    return $(this).attr('for') === id; 
  });

  $label.toggle(value.length === 0);

}).trigger('input');