Question

我必须删除具有“输入组”类的整个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>

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

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树中遍历单个级别。

Answer 2

使用&a代替closest，你会没事的并且您的HTML错误，parents标记在最后一个属性中有两个a。

""

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

Answer 3

尝试parents()而不是parent()

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

Answer 4

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

同时使用div类选择器是安全的，同时删除所需的div，以便在HTML中添加额外的div

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我必须通过jQuery删除父div

4 个答案: