TutorialMeta
Ad

Calculate The Children In The Parent Div And Removing Each Child By Clicking On The Button Untill Last Child

- 1 answer

I am struggling to remove the child div's except last one in each parent div with same class, my code structure is as below with my Java script to remove child div name repeating-div :

$('.repeatable').on('click', '.close-repeating-div', function(e) {
  e.preventDefault();
  var countdiv = $('.repeatable').children('.repeating-div').length;
  if (countdiv > 1) {
    $(this).closest('.repeating-div').remove();
  }
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="repeatable">
  <div class="repeating-div">
    <input type="text" class="form-control">
    <a target="_blank" rel="nofollow noreferrer" href="#" class="btn close-repeating-div form-control"><i class="fa fa-remove" aria-hidden="true"></i></a>
  </div>
  <div class="repeating-div">
    <input type="text" class="form-control">
    <a target="_blank" rel="nofollow noreferrer" href="#" class="btn close-repeating-div form-control"><i class="fa fa-remove" aria-hidden="true"></i></a>
  </div>
  <div class="repeating-div">
    <input type="text" class="form-control">
    <a target="_blank" rel="nofollow noreferrer" href="#" class="btn close-repeating-div form-control"><i class="fa fa-remove" aria-hidden="true"></i></a>
  </div>
</div>
<div class="repeatable">
  <div class="repeating-div">
    <input type="text" class="form-control">
    <a target="_blank" rel="nofollow noreferrer" href="#" class="btn close-repeating-div form-control"><i class="fa fa-remove" aria-hidden="true"></i></a>
  </div>
  <div class="repeating-div">
    <input type="text" class="form-control">
    <a target="_blank" rel="nofollow noreferrer" href="#" class="btn close-repeating-div form-control"><i class="fa fa-remove" aria-hidden="true"></i></a>
  </div>
  <div class="repeating-div">
    <input type="text" class="form-control">
    <a target="_blank" rel="nofollow noreferrer" href="#" class="btn close-repeating-div form-control"><i class="fa fa-remove" aria-hidden="true"></i></a>
  </div>
</div>

Here I want to remove child div's if there are more than one in each parent separately but my code is calculating all the child div's in one stream but I need to calculate them separately and need to remove them if there are more than one child div in each parent div

Ad

Answer

You need to specify that you are seaching only in the current .repeatable :

 var countdiv = $(this).closest('.repeatable').children('.repeating-div').length;

The above code means you start from the element that triggered your event (.close-repeating-div), go up to its .repeatable parent, then count only this div's children.

Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad