JQuery .remove()正在移除所有标签跨度，如何修复？

Question

我正在编写一个函数，当一个值被添加到一个隐藏的输入(图像id)，它是一个可见标签的子元素，包含警告文本的跨度将消失。好吧，我把警告文本消失了，但是它消失在我所有的表单元素上。谢谢您的所有帮助和投入！我现在要面对的是：

更改前的HTML：

        <div class="form-group-horizontal">
        <div class="form-group ellipsis">
          <label class="media-library ellipsis">
            <label for="before-image-modal-trigger" class="generic-form__label"><a class="clear-image">Clear Image</a>Before Image</label>
            <input type="hidden" name="before_image" id="before-image" class="invisible" accept="image/jpeg,image/jpg,image/x-png,image/png,.jpg,.jpeg,.png" data-validation-invalid="Invalid filetype. The supported file types are: .jpg, and .png" data-validation-required="The media field is required.">
            <button class="button modal-trigger" data-modal="media-library-modal" id="before-image-modal-trigger"><i class="fa fa-plus"></i>Select</button>
            <span class="selected-image">Select a Before image file.</span>
          </label>
        </div>
        <div class="form-group ellipsis">
          <label class="media-library ellipsis">
            <label for="after-image-modal-trigger" class="generic-form__label">After Image</label>
            <input type="hidden" name="after_image" id="after-image" class="invisible" accept="image/jpeg,image/jpg,image/x-png,image/png,.jpg,.jpeg,.png" data-validation-invalid="Invalid filetype. The supported file types are: .jpg, and .png" data-validation-required="The media field is required.">
            <button class="button modal-trigger" data-modal="media-library-modal" id="after-image-modal-trigger"><i class="fa fa-plus"></i>Select</button>
            <span class="selected-image">Select an After image file.</span>
          </label>
        </div>
      </div>

      <div class="form-group">
        <label for="title" class="generic-form__label">Title</label>
        <input type="text" name="title" id="title" class="generic-form__input" data-validation-required="The title field is required." />
      </div>

更改后的HTML：

        <div class="form-group-horizontal">
        <div class="form-group ellipsis">
          <label class="media-library ellipsis">
            <label for="before-image-modal-trigger" class="generic-form__label"> <span class="text text-danger error">The media field is required.</span> <a class="clear-image">Clear Image</a>Before Image</label>
            <input type="hidden" name="before_image" id="before-image" class="invisible" accept="image/jpeg,image/jpg,image/x-png,image/png,.jpg,.jpeg,.png" data-validation-invalid="Invalid filetype. The supported file types are: .jpg, and .png" data-validation-required="The media field is required.">
            <button class="button modal-trigger" data-modal="media-library-modal" id="before-image-modal-trigger"><i class="fa fa-plus"></i>Select</button>
            <span class="selected-image">Select a Before image file.</span>
          </label>
        </div>
        <div class="form-group ellipsis">
          <label class="media-library ellipsis">
            <label for="after-image-modal-trigger" class="generic-form__label"> <span class="text text-danger error">The media field is required.</span> After Image</label>
            <input type="hidden" name="after_image" id="after-image" class="invisible" accept="image/jpeg,image/jpg,image/x-png,image/png,.jpg,.jpeg,.png" data-validation-invalid="Invalid filetype. The supported file types are: .jpg, and .png" data-validation-required="The media field is required.">
            <button class="button modal-trigger" data-modal="media-library-modal" id="after-image-modal-trigger"><i class="fa fa-plus"></i>Select</button>
            <span class="selected-image">Select an After image file.</span>
          </label>
        </div>
      </div>

      <div class="form-group">
        <label for="title" class="generic-form__label">Title </label>
        <input type="text" name="title" id="title" class="generic-form__input" data-validation-required="The title field is required." />
      </div>

JQuery:函数上有一个.trigger('change')，它将图像id添加到隐藏输入中的值，顺便说一句。在另一个文件里。

if (field.is('input[type="hidden"][data-validation-required]') && $('label > span.error')) {
    $(this).on('change', function(){
      var value = $(this).val();

      if (value.length){
          $('label > span.error').remove();
      }
    });
  }

我还尝试查看是否执行if(value.length > 1)删除，但这也从所有内容中删除了警告文本。

Answer 1

在伪代码中，$('label > span.error').remove()说'find然后删除所有具有类error (label的直接子级)的span‘。

您希望删除span.error，它是更改此input的label的子级：

$(this).parent('label').find('span.error').remove():