How to renumber items when one of them is removed?

February 1, 2023

I have a use-case where input controls are listed and a remove button. The user has the option to remove any of the item in the list. I need to be able to check that there is more then one item in the list before I can remove the item. I also need to renumber the div, span and input control. So if a user removes id=1 I want to remove that item and they renumber then starting with 1.

function RemoveRow(id) {
  if (id > 0) {
    let rowCount = $('[id^=newrowItem_]').length
    if (rowCount != 1) {
      let removeData = `#newrowItem_${id}`;
      $(removeData).remove();
      // Re-number
      let inputdatagripPanel = $("#inputDataGrippanel");
      var inputdatagripForm = inputdatagripPanel.find(".form-group");
      let fieldItemid = 1;
     // $(inputdatagripForm).each((index, item) => {
     //   console.log(item);
     //   let fieldItem = `#fieldrowItem_${fieldItemid}`;
     //   item.attr('id', fieldItem);
     //   id++;
     // });
    } else {
      let fieldItem = `#fieldrowItem_${id}`;
      $(fieldItem).addClass('error');
    }
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<div id="inputDataGrippanel" class="col-sm-6 row">
  <div id="inputDataGrippanel" class="col-sm-6 row">
    <label>Rows</label>
    <div class="form-group" id="newrowItem_1">
      <div class="input-group">
        <input type="text" id="fieldrowItem_1" class="form-control fieldrowItem mb-3" placeholder="Row 1" data-value="0" required="" value="a">
        <span id="spanrowItem_1" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(1)">
          <i class="fa fa-remove" style="color:#CDCDCD"></i>
        </span>
      </div>
    </div>
    <div class="form-group" id="newrowItem_2">
      <div class="input-group">
        <input type="text" id="fieldrowItem_2" class="form-control fieldrowItem mb-3" placeholder="Row 2" data-value="0" required="" value="b">
        <span id="spanrowItem_2" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(2)">
          <i class="fa fa-remove" style="color:#CDCDCD"></i>
        </span>
      </div>
    </div>
    <div class="form-group" id="newrowItem_3">
      <div class="input-group">
        <input type="text" id="fieldrowItem_3" class="form-control fieldrowItem mb-3" placeholder="Row 3" data-value="0" required="" value="c">
        <span id="spanrowItem_3" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(3)">
          <i class="fa fa-remove" style="color:#CDCDCD"></i>
        </span>
      </div>
    </div>
    <div class="form-group" id="newrowItem_4">
      <div class="input-group">
        <input type="text" id="fieldrowItem_4" class="form-control fieldrowItem mb-3" placeholder="Row 4" data-value="0" required="" value="d">
        <i class="fa fa-remove" style="color:#CDCDCD"></i>
        </span>
      </div>
    </div>
    <div class="form-group" id="newrowItem_5">
      <div class="input-group">
        <input type="text" id="fieldrowItem_5" class="form-control fieldrowItem mb-3" placeholder="Row 5" data-value="0" required="" value="e">
        <span id="spanrowItem_5" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(5)">
          <i class="fa fa-remove" style="color:#CDCDCD"></i>
        </span>
      </div>
    </div>
  </div>

>Solution :

I have fixed a missing span in your HTML, modified the code that calls RemoveRow to be dynamic and added the logic that renumbers

function RemoveRow(id) {
  let divs = document.querySelectorAll('div.form-group');
  if ((id > 0) && (id <= divs.length)) {
    let rowCount = $('[id^=newrowItem_]').length
    if (rowCount != 1) {
      let removeData = `#newrowItem_${id}`;
      $(removeData).remove();
      // Re-number
      /*let inputdatagripPanel = $("#inputDataGrippanel");
      var inputdatagripForm = inputdatagripPanel.find(".form-group");
      let fieldItemid = 1;*/
      let index = 1;
      divs = document.querySelectorAll('div.form-group');
      for (let div of divs) {
          div.id = `newrowItem_${index}`;
          div.querySelector('input').id = `fieldrowItem_${index}`;
          div.querySelector('span').id = `spanrowItem_${index}`;
          index++;
      }
     // $(inputdatagripForm).each((index, item) => {
     //   console.log(item);
     //   let fieldItem = `#fieldrowItem_${fieldItemid}`;
     //   item.attr('id', fieldItem);
     //   id++;
     // });
    } else {
      let fieldItem = `#fieldrowItem_${id}`;
      $(fieldItem).addClass('error');
    }
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<div id="inputDataGrippanel" class="col-sm-6 row">
  <div id="inputDataGrippanel" class="col-sm-6 row">
    <label>Rows</label>
    <div class="form-group" id="newrowItem_1">
      <div class="input-group">
        <input type="text" id="fieldrowItem_1" class="form-control fieldrowItem mb-3" placeholder="Row 1" data-value="0" required="" value="a">
        <span id="spanrowItem_1" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(parseInt(this.id[this.id.length - 1]))">
          <i class="fa fa-remove" style="color:#CDCDCD"></i>
        </span>
      </div>
    </div>
    <div class="form-group" id="newrowItem_2">
      <div class="input-group">
        <input type="text" id="fieldrowItem_2" class="form-control fieldrowItem mb-3" placeholder="Row 2" data-value="0" required="" value="b">
        <span id="spanrowItem_2" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(parseInt(this.id[this.id.length - 1]))">
          <i class="fa fa-remove" style="color:#CDCDCD"></i>
        </span>
      </div>
    </div>
    <div class="form-group" id="newrowItem_3">
      <div class="input-group">
        <input type="text" id="fieldrowItem_3" class="form-control fieldrowItem mb-3" placeholder="Row 3" data-value="0" required="" value="c">
        <span id="spanrowItem_3" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(parseInt(this.id[this.id.length - 1]))">
          <i class="fa fa-remove" style="color:#CDCDCD"></i>
        </span>
      </div>
    </div>
    <div class="form-group" id="newrowItem_4">
      <div class="input-group">
        <input type="text" id="fieldrowItem_4" class="form-control fieldrowItem mb-3" placeholder="Row 4" data-value="0" required="" value="d">
        <span id="spanrowItem_4" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(parseInt(this.id[this.id.length - 1]))">
        <i class="fa fa-remove" style="color:#CDCDCD"></i>
        </span>
      </div>
    </div>
    <div class="form-group" id="newrowItem_5">
      <div class="input-group">
        <input type="text" id="fieldrowItem_5" class="form-control fieldrowItem mb-3" placeholder="Row 5" data-value="0" required="" value="e">
        <span id="spanrowItem_5" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(parseInt(this.id[this.id.length - 1]))">
          <i class="fa fa-remove" style="color:#CDCDCD"></i>
        </span>
      </div>
    </div>
  </div>