I have to remove parent div through jQuery

Question

I have to remove whole div which having class "input-group" . I have to do this by jQuery. I tried through jQuery but div is not removing.

Here is my code,

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

Please let me know what errors have in my code ? Thanks in advance.

Answer 1

Can you please try below code:

$(document).ready(function(){

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

});

$.closest is for traversing up through its ancestors in the DOM tree till we get the match.

In your code; rmvBtn is inside <span> tag. Hence $(this).parent('div') returns you nothing as $.parent() traverse only single level up in DOM tree.

Answer 2

Use closest instead of parents and you will be fine.
And your HTML is wrong, the a tag has two "" at the last attribute.

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

Use closest to find the closest element with a specified selector. The closest element is found by bubbling up from the current element.

Also use the div class selector to be safe while removing the required div in case of additional div's being added into your 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>