JQuery - Reformat number order when html element is removed

Question

I am currently trying to get a basic but of functionality working where I say have 5 rows, each with there own number.

So I have 5 rows .......5,4,3,2,1 <--- If I remove say 3 it should then look like 4,3,2,1 and so am effectively reflecting I now only have 4 now instead of 5.....if I remove another value it then goes to 3,2, 1 and so on.

I have been somewhat close but cant quite get it to work.

Here is the JSfiddle

jQuery(function($) {
  var countercontact = 0;
  var counternum = 0;
  $("#addcontact").on('click', function() {
    countercontact++;
    $("#contact_num").append('<div class="row"><div class="form-group col-xs-1 contactspan"><span class="countercontact">' + countercontact + '.</span></div><div class="form-group col-xs-3"><input type="text" class="form-control" id="pass" placeholder="No number"></div><div class="form-group col-xs-2"><select class="form-control" id="delay"><option>5</option><option>10</option><option>20</option><option>30</option><option>40</option><option>50</option><option>60</option></select></div><div class="form-group col-xs-2">\<input type="checkbox" class="form-control" id="confirm"></div><div class="form-group col-xs-2"><input type="checkbox" class="form-control" id="enable"></div><div class="form-group col-xs-2"><button type="submit" class="btn btn-primary form-control deletecontact">Delete</button></div></div>');
    if (countercontact === 1) {
      $(".deletecontact").addClass('disabled');
    } else {
      $(".deletecontact").removeClass('disabled');
    }
  });

  $("#contact_num").on("click", ".deletecontact", function() {
    if (countercontact <= 1) {
      $(".deletecontact").addClass('disabled');
    } else {
      $(".deletecontact").removeClass('disabled');
      $(this).closest('.row').remove();
      countercontact--;
      $(".contactspan").each(function(index) {
        var ordernum = $(this).text();
        console.log(ordernum);
        if (ordernum !== 1) {
          $(this).text(parseInt($(this).text()) - 1);
        }
      });
    }
  });
});

.container {
  width: 75%;
}
.row {
  margin-bottom: 12px;
  font-size: 13px;
}
.panel {
  border: none;
  box-shadow: none;
}
.panel-heading {
  background-color: #D9DBDE;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 0;
}
.panel-heading.head {
  padding: 20px 0;
  background-color: #E1F2F9;
}
.panel-body {
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="panel panel-default">
  <div class="panel-body row">
    <div class="form-group" id="contact_num">
      <div class="row">
        <div class="form-group col-md-1">
          <label for="pass"></label>
        </div>
        <div class="form-group col-md-3">
          <label for="pass">Contact No(s)</label>
        </div>
        <div class="form-group col-md-2">
          <label for="delay">Delay</label>
        </div>
        <div class="form-group col-md-2">
          <label for="confirm">Confirm</label>
        </div>
        <div class="form-group col-md-2">
          <label for="enable">Enable</label>
        </div>
        <div class="form-group col-md-2">
          <label for="delete"></label>
        </div>
      </div>
    </div>
    <button type="submit" class="btn btn-primary" id="addcontact" style="margin-bottom: 10px;">Add</button>
  </div>
</div>

Answer 1

You can write a function that corrects numbers and run whenever needed like after removing an item.

function correctIndex(){
    $('#contact_num .row').each(function(){
          $(this).find('.contactspan').html($(this).index()+1);
    });
}

Or you just change this part of your code:

    $(".contactspan").each(function(index) {
        var ordernum = $(this).text();
        console.log(ordernum);
        if (ordernum !== 1) {
          $(this).text(parseInt($(this).text()) - 1);
        }
 });

to:

$(".contactspan").each(function(){
      $(this).html($(this).closest('.row').index() + '.')
});

Here is updated fiddle

Answer 2

Please check below snippet. I have made change in the reassigning of number as following.

  var ordernum = 1;
  $(".contactspan").each(function(index) {
    $(this).text(ordernum);
    ordernum++;
  });

First assign the order number to 1 and then gradually increase it further rows.

jQuery(function($) {
  var countercontact = 0;
  var counternum = 0;
  $("#addcontact").on('click', function() {
    countercontact++;
    $("#contact_num").append('<div class="row"><div class="form-group col-xs-1 contactspan"><span class="countercontact">' + countercontact + '.</span></div><div class="form-group col-xs-3"><input type="text" class="form-control" id="pass" placeholder="No number"></div><div class="form-group col-xs-2"><select class="form-control" id="delay"><option>5</option><option>10</option><option>20</option><option>30</option><option>40</option><option>50</option><option>60</option></select></div><div class="form-group col-xs-2">\<input type="checkbox" class="form-control" id="confirm"></div><div class="form-group col-xs-2"><input type="checkbox" class="form-control" id="enable"></div><div class="form-group col-xs-2"><button type="submit" class="btn btn-primary form-control deletecontact">Delete</button></div></div>');
    if (countercontact === 1) {
      $(".deletecontact").addClass('disabled');
    } else {
      $(".deletecontact").removeClass('disabled');
    }
  });

  $("#contact_num").on("click", ".deletecontact", function() {
    if (countercontact <= 1) {
      $(".deletecontact").addClass('disabled');
    } else {
      $(".deletecontact").removeClass('disabled');
      $(this).closest('.row').remove();
      countercontact--;
      var ordernum = 1;
      $(".contactspan").each(function(index) {
        $(this).text(ordernum);
        ordernum++;
      });
    }
  });
});

.container {
  width: 75%;
}
.row {
  margin-bottom: 12px;
  font-size: 13px;
}
.panel {
  border: none;
  box-shadow: none;
}
.panel-heading {
  background-color: #D9DBDE;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 0;
}
.panel-heading.head {
  padding: 20px 0;
  background-color: #E1F2F9;
}
.panel-body {
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="panel panel-default">
  <div class="panel-body row">
    <div class="form-group" id="contact_num">
      <div class="row">
        <div class="form-group col-md-1">
          <label for="pass"></label>
        </div>
        <div class="form-group col-md-3">
          <label for="pass">Contact No(s)</label>
        </div>
        <div class="form-group col-md-2">
          <label for="delay">Delay</label>
        </div>
        <div class="form-group col-md-2">
          <label for="confirm">Confirm</label>
        </div>
        <div class="form-group col-md-2">
          <label for="enable">Enable</label>
        </div>
        <div class="form-group col-md-2">
          <label for="delete"></label>
        </div>
      </div>
    </div>
    <button type="submit" class="btn btn-primary" id="addcontact" style="margin-bottom: 10px;">Add</button>
  </div>
</div>

Answer 3

The following is causing the behaviour:

var ordernum = $(this).text();
console.log(ordernum);
if (ordernum !== 1) {
  $(this).text(parseInt($(this).text()) - 1);
}

ordernum is in this case 1. so you have to convert it to an int just like you do in the if clause.

var ordernum = parseInt($(this).text());
console.log(ordernum);
if (ordernum !== 1) {
  $(this).text(ordernum - 1);
}

See https://jsfiddle.net/YvCil/ajgm9rhw/1/