Question

我的jquery脚本有问题。我有这样的代码，我的脚本只删除输入而不是标签。如何删除标签？

<div class="input_fields_container">
        @foreach($data->videoTags as $tag)
        <div class="el">
        <div class="form-group">
          <label class="col-lg-2 control-label bold">@lang('main.position')</label>
          <div class="col-lg-6 input-group">
          <input type="text" placeholder="" name="tag[]" value="{{$tag->tag}}" class="form-control">
          <div class="input-group-btn inup-group-addon"><a href="#" class="remove_field" style="margin-left:10px;">@lang('main.delete')</a>
          </div>
        </div>
        </div>
      </div>
  @endforeach
      </div>
      <script type="text/javascript">
  $(document).ready(function() {
  $('.input_fields_container').on("click", ".remove_field", function(e) { //user click on remove text links
      e.preventDefault();
      $(this).parents().eq(1).remove();
      x--;
  })
});
</script>

Answer 1

您可以使用closest()定位包含label的父div：

$(this).closest('.form-group').remove();
//OR
$(this).closest('.form-group').html('');

注意：您可以跳转至您需要的el父级来更改选择器。

Answer 2

这里使用选择器eq并不是很明智。您可以查看文档以了解如何有效地使用它：

https://api.jquery.com/eq-selector/

您可以阅读：

＆＃34;他们根据此匹配集中元素的顺序缩小设置。例如，如果首先使用类选择器（.myclass）选择元素并返回四个元素，则为了这些选择器的目的，这些元素被赋予索引0到3。＆＃34;

通过执行$(this).parent().eq(1).remove()，您将只删除与$(this).parent()选择匹配的元素数组中的一个元素。您可以检查数组中的内容以尝试了解要删除的内容。

我建议您可以使用foreach创建一个属性，例如＆＃34; data-input = y＆＃34;在<div class="el">上，其中y是您递增的变量。就像那样，您可以快速了解要删除的输入，并且您的选择不依赖于DOM的结构。

如何使用jquery删除字段

2 个答案: