Ajouter supprimer dynamiquement des lignes sur un tableau

<!DOCTYPE html>
<html>
<head>
<title>AJOUTER SUPPRIMER DYNAMIQUEMENT DES LIGNES SUR UN TABLEAU | par NGLESSON </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="AJOUTER SUPPRIMER DYNAMIQUEMENT DES LIGNES SUR UN TABLEAU">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body onload="createTable()">
  <div class="container">
    <div class="row mt-5">
      <div class="col-lg-12">
          <p>
              <input type="button" id="addRow" value="Add New Row in table" class="btn btn-info btn-md" onclick="addRow()" />
          </p>
          <div id="cont"></div>
          <p><input type="button" id="bt" value="Send Data" class="btn btn-success btn-md" onclick="submit()" /></p>
      </div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>

table { width: 70%; }
table, th, td { border: solid 1px #DDD;
    border-collapse: collapse; padding: 2px 3px; text-align: center;
}

var arrHead = new Array();
arrHead = ['', 'Full name', 'Country', 'Job']; // table headers.

// first create a TABLE structure by adding few headers.
function createTable() {
    var dynamicTable = document.createElement('table');
    dynamicTable.setAttribute('id', 'dynamicTable');  // table id.
    dynamicTable.setAttribute('class', 'table table-hover');

    var tr = dynamicTable.insertRow(-1);

    for (var h = 0; h < arrHead.length; h++) {
        var th = document.createElement('th'); // the header object.
        th.innerHTML = arrHead[h];
        tr.appendChild(th);
    }

    var div = document.getElementById('cont');
    div.appendChild(dynamicTable);    // add table to a container.
}

// function to add new row.
function addRow() {
    var empTab = document.getElementById('dynamicTable');

    var rowCnt = empTab.rows.length;    // get the number of rows.
    var tr = empTab.insertRow(rowCnt); // table row.
    tr = empTab.insertRow(rowCnt);

    for (var c = 0; c < arrHead.length; c++) {
        var td = document.createElement('td');          // TABLE DEFINITION.
        td = tr.insertCell(c);

        if (c == 0) {   // if its the first column of the table.
            // add a button control.
            var button = document.createElement('input');

            // set the attributes.
            button.setAttribute('type', 'button');
            button.setAttribute('value', 'Remove');
            button.setAttribute('class', 'btn btn-danger btn-md');

            // add button's "onclick" event.
            button.setAttribute('onclick', 'removeRow(this)');

            td.appendChild(button);
        }
        else {
            // the 2nd, 3rd and 4th column, will have textbox.
            var ele = document.createElement('input');
            ele.setAttribute('type', 'text');
            ele.setAttribute('class', 'form-control');
            ele.setAttribute('value', '');

            td.appendChild(ele);
        }
    }
}

// function to delete a row.
function removeRow(oButton) {
    var empTab = document.getElementById('dynamicTable');
    empTab.deleteRow(oButton.parentNode.parentNode.rowIndex); // buttton -> td -> tr
}

// function to extract and submit table data.
function submit() {
    var myTab = document.getElementById('dynamicTable');
    var arrValues = new Array();

    // loop through each row of the table.
    for (row = 1; row < myTab.rows.length - 1; row++) {
        // loop through each cell in a row.
        for (c = 0; c < myTab.rows[row].cells.length; c++) {
            var element = myTab.rows.item(row).cells[c];
            if (element.childNodes[0].getAttribute('type') == 'text') {
                arrValues.push("'" + element.childNodes[0].value + "'");
            }
        }
    }
    
    // finally, show the result in the console.
    console.log(arrValues);
}