如何使用jquery删除字段

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/

你可以阅读：

“它们根据匹配集合中元素的顺序缩小设置。例如，如果首先使用类选择器（.myclass）选择元素并返回四个元素，则为这些元素指定0到3的索引。这些选择者的目的。“

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

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