How do I Change id's name or number sequentially after pressing remove row button

Question

My problem before How do I change the select id's name after add table rows? The case is done, but one more problem is change the select id's name or number after remove rows? I have tried using replace and childnodes, but they are still not working.

For example: I add three rows,

facility1
facility2
facility3

Then remove row for #2, this is exactly what I want

facility1
facility2

but I got,

facility1
facility3

This is the table:

<table id="tableInformation">
  <tr>
    <td><label>No</label></td>
    <td><label>Facility</label></td>
    <td><label>Currency</label></td>
    <td></td>
  </tr>
  <tbody>
  <tr>
    <td><label>1</label></td>
    <td><div id="facility">
        <select id="facility1" name="facility">
          <option value=""></option>
          <option value="AL">AL</option>
          <option value="BL">BL</option>
          <option value="CL">CL</option>
        </select>
     </td>
     <td><div id="currency">
        <select id="currency1" name="currency">
          <option value=""></option>
          <option value="idr">IDR</option>
          <option value="usd">USD</option>
          <option value="aud">AUD</option>
          <option value="jpy">JPY</option>
        </select>
     </td>
     <td><input type="button" id="btnAddRows" value=" + "
          onclick=\'addRows()\' />
         <input type="button" id="btnRemRows" value=" - "
          onclick=\'removeRows(this)\' />
  </tr>
  </tbody>
 </table>

The javascript:

function addRows() {
    var table = document.getElementById('tableInformation');
    var rowCount = table.rows.length;
    var iteration = rowCount -1;
    var numbers = iteration +1;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;

    // Cell for number
    var cell = row.insertCell(0);
    var label = document.createElement('label');
    label.textContent = numbers;
    cell.appendChild(label);

    for(var i=1; i<colCount; i++) {

        var newcell = row.insertCell(i);
        newcell.innerHTML = 
        table.rows[1].cells[i].innerHTML.replace(/id="(.+)1"/,'id="$1' + 
        rowCount + '"');

    }

}


function removeRows(index) {

    var i = index.parentNode.parentNode.rowIndex;
    var table = document.getElementById('tableInformation');
    var rowCount = table.rows.length;
    var iteration = rowCount -1;
    /*var numbers = iteration +1;*/

    if(iteration == 1) {
        alert("Cannot remove");
    }else{
        table.deleteRow(i);
        //alert(iteration);
        for(var j=1; j<iteration; j++) {

            table.rows[j].cells[0].childNodes[0].id = 'number'+(j-1+1);
            table.rows[j].cells[0].childNodes[0].textContent = (j-1+1);

            table.rows[j].cells[1].innerHTML.replace(/id="(.+)1" 
            /,'id="$1' + rowCount + '"');
            table.rows[j].cells[2].innerHTML.replace(/id="(.+)1" 
            /,'id="$1' + rowCount + '"');
            table.rows[j].cells[3].innerHTML.replace(/id="(.+)1" 
            /,'id="$1' + rowCount + '"');
            table.rows[j].cells[4].innerHTML.replace(/id="(.+)1" 
            /,'id="$1' + rowCount + '"');
        }

    }

}

Answer 1

• Use .cloneNode to make copy of the existing element.
• Use .remove() to remove the element from the DOM .
• Use querySelector to select the element from DOM by specifying selector
• On remove() of every element, re-assign id attributes in a loop using setAttribute

 var table = document.getElementById('tableInformation'); function addRows() { var toClone = document.getElementById('toClone').cloneNode(true); toClone.removeAttribute('id'); var len = table.querySelectorAll('tr').length; toClone.querySelector('label').textContent = len; toClone.querySelector('[name="facility"]').setAttribute('id', 'facility' + len); toClone.querySelector('[name="currency"]').setAttribute('id', 'currency' + len); table.appendChild(toClone.cloneNode(true)); } function removeRows(elem) { var trElems = table.querySelectorAll('tr'); if (trElems.length > 2) { elem.parentNode.parentNode.remove(); trElems = table.querySelectorAll('tr'); for (var i = 1, len = trElems.length; i < len; i++) { trElems[i].querySelector('label').textContent = i; trElems[i].querySelector('[name="facility"]').setAttribute('id', 'facility' + i); trElems[i].querySelector('[name="currency"]').setAttribute('id', 'currency' + i); } } else { alert('Atleast one row should be there!') } } 

 <table id="tableInformation"> <tr> <td> <label>No</label> </td> <td> <label>Facility</label> </td> <td> <label>Currency</label> </td> <td></td> </tr> <tr id='toClone'> <td> <label>1</label> </td> <td> <div id="facility"> <select id="facility1" name="facility"> <option value=""></option> <option value="AL">AL</option> <option value="BL">BL</option> <option value="CL">CL</option> </select> </div> </td> <td> <div id="currency"> <select id="currency1" name="currency"> <option value=""></option> <option value="idr">IDR</option> <option value="usd">USD</option> <option value="aud">AUD</option> <option value="jpy">JPY</option> </select> </div> </td> <td> <input type="button" id="btnAddRows" value=" + " onclick='addRows()' /> <input type="button" id="btnRemRows" value=" - " onclick='removeRows(this)' /> </tr> </table> 

Answer 2

Try this:

add one line in your remove function -

table.rows[j].cells[1].childNodes[0].children[0].id = 'facility'+(j-1+1);

as

   function removeRows(index) {

var i = index.parentNode.parentNode.rowIndex;
var table = document.getElementById('tableInformation');
var rowCount = table.rows.length;
var iteration = rowCount -1;
/*var numbers = iteration +1;*/

if(iteration == 1) {
    alert("Cannot remove");
}else{
    table.deleteRow(i);
    //alert(iteration);
    for(var j=1; j<iteration; j++) {
        table.rows[j].cells[0].childNodes[0].id = 'number'+(j-1+1);
        table.rows[j].cells[0].childNodes[0].textContent = (j-1+1);
table.rows[j].cells[1].childNodes[0].children[0].id = 'facility'+(j-1+1);

        table.rows[j].cells[1].innerHTML.replace(/id="(.+)1"/,'id="$1' + rowCount + '"');
        table.rows[j].cells[2].innerHTML.replace(/id="(.+)1"/,'id="$1' + rowCount + '"');
        table.rows[j].cells[3].innerHTML.replace(/id="(.+)1"/,'id="$1' + rowCount + '"');
    }

}

}