Dynamically Add/Remove html element array structure

Question

I am using jQuery and JavaScript to add/remove HTML Element. in that case i remove specific html element

following code

$(document).ready(function() {
  var i = 1;
  $("#plus").click(function() {
    i++;
    $('#editrow').append("+<tr id=rownum_" + i + "><td>" + i + "</td>" +
      "<td><input type='text' id='cid_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><input type='text' id='lac_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><input type='text' id='mnc_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><input type='text' id='mcc_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><button type='button' id=" + i + " onClick='delrow(" + i + ")' class='btn btn-warning btn-sm'>-</button></td></tr>");
  });
});

function delrow(num) {
  var element = document.getElementById("rownum_" + num);
  element.parentNode.removeChild(element);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed">
  <thead>
    <tr>
      <th>#</th>
      <th>CID</th>
      <th>LAC</th>
      <th>MNC</th>
      <th>MCC</th>
      <th align="right"><button id="plus" type="button" class="btn btn-primary btn-sm">+</span></button></th>
    </tr>
  </thead>
  <tbody id="editrow">
    <tr id=rownum_1>
      <td>1</td>
      <td><input type='text' id='cid_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><input type='text' id='lac_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><input type='text' id='mnc_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><input type='text' id='mcc_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><button type='button' id=1 onClick='delrow(1)' class='btn btn-warning btn-sm'>-</button></td>
    </tr>
  </tbody>
</table>

Using this code i add element like index 1,2,3,4,5,6 and i remove some element index like 3,4,5 ,and that will deleted. after we add any element they started with 7,8,9 and show index like 1,2,6,7,8,9 now total element is 6. how to manage that ? , i want to get that index like 1,2,3,4,5,6

is this notify the server side that element has deleted or something? what will be happened after page get reload? what is the order server is going to render this?refactoring the dom elements after deleting is the best way I think.just loop the remaining elements & set ID attribute from the 0 or 1. — Sanka
– Sanka, Commented Jan 13, 2018 at 8:12

Nisarg Shah · Accepted Answer · 2018-01-13 07:34:04Z

I think the best way to handle inserts and updates to the table would be to keep a separate function resetRowIndex to assign the row number to every tr, without worrying about the index at the time of insertion or deletion. The function resetRowIndex can be called after every insert or delete to reset the index of every record.

$(document).ready(function() {
  resetRowIndex();

  $("#plus").click(function() {
    var i = 0;
    $('#editrow').append("+<tr id=rownum_" + i + "><td>" + i + "</td>" +
      "<td><input type='text' id='cid_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><input type='text' id='lac_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><input type='text' id='mnc_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><input type='text' id='mcc_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><button type='button' id=" + i + " onClick='delrow(event)' class='btn btn-warning btn-sm'><span class='glyphicon glyphicon-remove-sign'>Remove</span></button></td></tr>");
      
      resetRowIndex();
  });
});

function delrow(event) {
  var element = $(event.target).closest("tr");
  element.remove();
  
  resetRowIndex();
}

function resetRowIndex() {
  var idx = 0;
  $("#editrow tr").each(function() {
    $(this).find("td").first().text($(this).index() + 1);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed">
  <thead>
    <tr>
      <th>#</th>
      <th>CID</th>
      <th>LAC</th>
      <th>MNC</th>
      <th>MCC</th>
      <th align="right"><button id="plus" type="button" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-plus-sign">Add</span></button></th>
    </tr>
  </thead>
  <tbody id="editrow">
    <tr id=rownum_1>
      <td>1</td>
      <td><input type='text' id='cid_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><input type='text' id='lac_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><input type='text' id='mnc_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><input type='text' id='mcc_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><button type='button' id=1 onClick='delrow(event)' class='btn btn-warning btn-sm'><span class='glyphicon glyphicon-remove-sign'>Remove</span></button></td>
    </tr>
  </tbody>
</table>

_{Although this is not the most optimal way of doing so, it is probably the simplest. If you intend to make this optimal, you can write some logic to keep track of the numbers getting deleted, and update subsequent records etc.}

But sir its not working properly....tested that i add multiple row, and enter some data, after that i remove that row, it cant be delete....! but another row was delete....
@mak That should work fine now in the snippet in my answer. I had missed that you are referring to the number while deleting the row. Instead, I have now updated that to refer back to the clicked element using event.target, and then you can delete relevant tr using: $(event.target).closest('tr').remove().

Collectives™ on Stack Overflow

Dynamically Add/Remove html element array structure

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related