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

Dynamically Add/Remove html element array structure

user3128
1#
user3128 Published in April 24, 2018, 8:34 am

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

You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO