我必须通过jQuery删除父div

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

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

Answer 3

尝试使用parents()代替parent()

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

Answer 4

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

如果将额外的div添加到HTML中，也可以在删除所需的div时使用div类选择器是安全的

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