我需要用jQuery移除父级div

Question

我需要移除所有类名为"input-group"的div元素。我需要使用jQuery来实现这一功能。我已经尝试过使用jQuery，但是div并没有被移除。

以下是我的代码：

$(document).ready(function() {
  $(".wrapper").on('click', '.rmvBtn', function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="input-group">
    <input type="text" class="form-control" name="field_name[]" value="" />
    <span class="input-group-addon">
      <a href="#" class="rmvBtn" title="Remove field"">
        <span class="glyphicon glyphicon-minus"></span>
      </a>
    </span>
  </div>
</div>

请告诉我我的代码中有哪些错误？提前感谢。

- Sandeep Kumar

Answer 1

请尝试下面的代码：

$(document).ready(function(){

    $(".wrapper").on('click', '.rmvBtn', function(e){ 
          e.preventDefault();
          $(this).closest('div.input-group').remove();
          x--;
    });

});

$.closest用于遍历DOM树中其祖先元素，直到找到匹配的元素。

在您的代码中，rmvBtn位于<span>标记内。因此，$(this).parent('div')不返回任何内容，因为$.parent()只会向上遍历单个级别的DOM树。

- vijayP

Answer 2

使用closest替代parents，你就会没问题了。
而且你的HTML是错误的，a标签在最后一个属性处有两个""。

$(function() {
    $(".wrapper").on('click', '.rmvBtn', function(e) {
        e.preventDefault();
        $(this).closest("div").remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="input-group">
    <input type="text" class="form-control" name="field_name[]" value="" />
    <span class="input-group-addon">
      <a href="#" class="rmvBtn" title="Remove field">
        <span class="glyphicon glyphicon-minus">btn</span>
      </a>
    </span>
  </div>
</div>

- eisbehr

Answer 3

使用closest方法查找最接近的具有指定选择器的元素。最接近的元素是通过从当前元素向上冒泡来找到的。

此外，在删除所需的

时，为了安全起见，也可以使用

类选择器，以防HTML中添加了其他

。

$(this).closest('div.input-group').remove();

$(document).ready(function() {
  $(".wrapper").on('click', '.rmvBtn', function(e) {
    e.preventDefault();
    $(this).closest('div.input-group').remove();
   // x--;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="input-group">
    <input type="text" class="form-control" name="field_name[]" value="" />
    <span class="input-group-addon">
      <a href="#" class="rmvBtn" title="Remove field"">
        <span class="glyphicon glyphicon-minus">remove</span>
      </a>
    </span>
  </div>
</div>

- Rajshekar Reddy

Answer 4

尝试使用 parents() 而不是 parent()。

$(this).parents('.input-group').remove();

- Bartłomiej Gładys

---

partens("div") 会同时移除 wrapper。 - eisbehr

答案仍然是错误的，我们不想删除.wrapper！ - eisbehr

我认为在这里使用parents函数是完全错误的。你应该真正使用closest函数来防止你在这里犯下这样的错误。parents将始终匹配树中所有向上的元素。所以请小心... - eisbehr