Home Dynamically Add/Remove html element array structure
Reply: 1

Dynamically Add/Remove html element array structure

mak
1#
mak Published in 2018-01-13 06:55:21Z

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

Nisarg Shah
2#
Nisarg Shah Reply to 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.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.306809 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO