Add and remove table rows dynamically with jQuery

Question

I am a beginner in jQuery. I have to put add and remove buttons to each table row. When remove any of row, I want the first column values to be serialized in ascending order. Now I just don't get it. Will appreciate for your help.

These are my jQuery codes:

$(function(){
        $(".addButton").click(function(){
            var x=document.getElementById('applyList');
            var new_row = x.rows[1].cloneNode(true);
            var len = x.rows.length;
            new_row.cells[0].innerHTML = len;
            var select = new_row.cells[1].getElementsByTagName('select')[0];
            select.id += len;
            select.value = '1';
            var inp1 = new_row.cells[2].getElementsByTagName('input')[0];
            inp1.id += len;
            inp1.value = '';
            var inp2 = new_row.cells[3].getElementsByTagName('input')[0];
            inp2.id += len;
            inp2.value = '';
            x.appendChild( new_row );
        });

        $(document).on('click', '.deleteButton', function() {
            var x = $('#applyList tr').length;
            if(x == 2){
            } else {
                 $(this).closest("tr").remove();
                 var row = $(this).closest("tr") // get to the row
                 row.children().each(function(){

                 });
            }
        });
    });

This is html codes:

<table class="list" id="applyList">
                                <thead>
                                <tr>
                                    <th class="thead color-white width-30">#</th>
                                    <th class="thead color-white width-150">Route</th>
                                    <th class="thead color-white width-50">Fare [MMK]</th>
                                    <th class="thead color-white width-50">Remark</th>
                                    <th class="thead color-white">
                                        <button type="button" id="add" class="button-style tbl-button button-sm bg-color-sky-blue">ADD</button>
                                    </th>
                                </tr>
                                </thead>
                                <tr>
                                    <td>1</td>
                                    <td>
                                        <select>
                                            <option value="1">Home->Office->Home</option>
                                        </select>
                                    </td>
                                    <td><input type="text" class="width-50"/></td>
                                    <td><input type="text" /></td>
                                    <td>


                                        <img class="addButton width-30 height-30 align-middle" src="../../public/img/busfare/plus.png"/>
                                        <img class="deleteButton width-30 height-30 align-middle" src="../../public/img/busfare/minus.png"/>
                                    </td>
                                </tr>

                            </table>

The output is here:

Fiddle Link

Answer 1

You can use splice() method to remove element from Array. For detail check https://www.w3schools.com/jsref/jsref_splice.asp

Answer 2

I'm assuming when the button#add adds a row at the end of the table and the img.addButton adds a row after that line. Here you have my approach...

function createRow(id) {
    var newrow = [
        id,
        '<select><option value="1">Home->Office->Home</option></select>',
        '<input type="text" class="width-50"/>',
        '<input type="text" />',
        '<img class="addButton width-30 height-30 align-middle" src="../../public/img/busfare/plus.png"/><img class="deleteButton width-30 height-30 align-middle" src="../../public/img/busfare/minus.png"/>'
    ];

    return '<tr><td>'+newrow.join('</td><td>')+'</td></tr>';
}

function renumberRows() {
    $('table#applyList tbody tr').each(function(index) {
        $(this).children('td:first').text(index+1);
    });
}

$('button#add').click(function() {
    var lastvalue = 1 + parseInt($('table#applyList tbody').children('tr:last').children('td:first').text());
    $('table#applyList tbody').append(createRow(lastvalue));
});

$('table#applyList').on('click','.addButton',function() {
    $(this).closest('tr').after(createRow(0));
    renumberRows();
}).on('click','.deleteButton',function() {
    $(this).closest('tr').remove();
    renumberRows();
});

I hope it helps