Add/Delete Table Rows Dynamically Using JavaScript

Html add and delete rows dynamically with javascript

You can achieve it by simply changing your deleteRow() function like below. Whereas row.cells[0].childNodes[0] gives you error. row.cells[0] gives you HTML code, similar to like this - <td>NEW CELL1</td>. The childNode of that HTML does not have any information. So, always throws an error.

function addRow() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
}

function deleteRow(tableID) {
  document.getElementById(tableID).innerHTML = "";
}

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

  <table id="myTable">
    <tr>

    </tr>
  </table>
  <br>

  <button type="button" onclick="addRow()">Add</button>
  <button type="button" onclick="deleteRow('myTable')">Delete</button>

</body>
</html>

Add/Delete table rows dynamically using JavaScript

You could just clone the first row that has the inputs, then get the nested inputs and update their ID to add the row number (and do the same with the first cell).

function deleteRow(row)
{
    var i=row.parentNode.parentNode.rowIndex;
    document.getElementById('POITable').deleteRow(i);
}

function insRow()
{
    var x=document.getElementById('POITable');
       // deep clone the targeted row
    var new_row = x.rows[1].cloneNode(true);
       // get the total number of rows
    var len = x.rows.length;
       // set the innerHTML of the first row 
    new_row.cells[0].innerHTML = len;

       // grab the input from the first cell and update its ID and value
    var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
    inp1.id += len;
    inp1.value = '';

       // grab the input from the first cell and update its ID and value
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = '';

       // append the new row to the table
    x.appendChild( new_row );
}

Demo below

function deleteRow(row) {  var i = row.parentNode.parentNode.rowIndex;  document.getElementById('POITable').deleteRow(i);}

function insRow() {  console.log('hi');  var x = document.getElementById('POITable');  var new_row = x.rows[1].cloneNode(true);  var len = x.rows.length;  new_row.cells[0].innerHTML = len;
  var inp1 = new_row.cells[1].getElementsByTagName('input')[0];  inp1.id += len;  inp1.value = '';  var inp2 = new_row.cells[2].getElementsByTagName('input')[0];  inp2.id += len;  inp2.value = '';  x.appendChild(new_row);}

<div id="POItablediv">  <input type="button" id="addPOIbutton" value="Add POIs" /><br/><br/>  <table id="POITable" border="1">    <tr>      <td>POI</td>      <td>Latitude</td>      <td>Longitude</td>      <td>Delete?</td>      <td>Add Rows?</td>    </tr>    <tr>      <td>1</td>      <td><input size=25 type="text" id="latbox" /></td>      <td><input size=25 type="text" id="lngbox" readonly=true/></td>      <td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)" /></td>      <td><input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="insRow()" /></td>    </tr>  </table>

How to delete the rows of dynamically created table with their respective dynamic id using delete button

You have to identify the button you pressed by the event to know which row to delete. To do that, you can use event.target (=> this is your button element). When you access the event.target.id, you can simply parse it to find the matching row.

var tn = 0;

function addTermrows() {
  tn++;

  let TermNameInput = document.getElementById("TermNameValue");
  TNIValue = TermNameInput.value;

  const MainTbody = document.getElementById("mainTBody");

  const CreateTR = document.createElement('tr');
  CreateTR.id = "CreateTR" + tn;

  const tdOne = document.createElement('td');
  tdOne.id = "tdOne" + tn;
  tdOne.className = 'one ps-3';

  const pOne = document.createElement('p');
  pOne.id = "pOne" + tn;
  pOne.className = 'mb-0';
  pOne.innerText = "0" + tn;

  const tdTwo = document.createElement('td');
  tdTwo.id = "tdTwo" + tn;
  tdTwo.className = 'two';

  const pTwo = document.createElement('p');
  pTwo.id = "pTwo" + tn;
  pTwo.className = 'mb-0';
  pTwo.innerText = TNIValue;

  const tdThree = document.createElement('td');
  tdThree.id = "tdThree" + tn;
  tdThree.className = 'three';

  const tdFour = document.createElement('td');
  tdFour.id = "tdFour" + tn;
  tdFour.className = 'four';

  const tdFive = document.createElement('td');
  tdFive.id = "tdFive" + tn;
  tdFive.className = 'text-end pe-3 five';

  const DelButton = document.createElement('button');
  DelButton.id = "DelButton" + tn;
  DelButton.setAttribute("type", "button");
  DelButton.setAttribute("cursor", "pointer");
  DelButton.setAttribute("runat", "server");
  //DelButton.setAttribute("onclick", "DelRow");
  DelButton.className = 'btn btn-sm btn-del-action fw-bold text-danger';
  DelButton.innerText = "Delete";
  DelButton.onclick = function(event) {
    //parse the id of the row from the id
    var rowNr = event.target.id.substr("DelButton".length, event.target.id.length);
    //get the actual row element
    var delRow = document.getElementById("CreateTR" + rowNr);
    delRow.remove(); 
  };

  tdOne.appendChild(pOne);
  tdTwo.appendChild(pTwo);
  tdFive.appendChild(DelButton);
  CreateTR.appendChild(tdOne);
  CreateTR.appendChild(tdTwo);
  CreateTR.appendChild(tdThree);
  CreateTR.appendChild(tdFour);
  CreateTR.appendChild(tdFive);
  MainTbody.appendChild(CreateTR);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/js/bootstrap.bundle.min.js"></script>

<div class="col-4">
  <input class="form-control bgTN ps-4 pe-4 pt-2 pb-2 mb-2" placeholder="Enter Here" id="TermNameValue" type="text" name="grade" />
</div>
<button class="btn btn-primary text-white ps-3 pe-4" id="btnToaddTermRows" onclick="addTermrows()">Add</button>

<table class="table table-hover table-responsive spacing-table">
  <thead class="rounded-3">
    <tr>
      <th scope="col" class="col-1 ps-3">S No/</th>
      <th scope="col" class="col-2">Input Value</th>
      <th scope="col" class="col-7"></th>
      <th scope="col" class="col-1"></th>
      <th scope="col" class="col-1 pe-5 text-end">Action</th>
    </tr>
  </thead>
  <tbody id="mainTBody">

  </tbody>

Html table add and delete rows dynamically with javascript

<button type="button" onclick="deleteRow('myTable')">Delete</button>

Just had the wrong table id being passed in.

How to dynamically add/delete table rows in ReacjJS

You have a single state value for qty and itemID so it'll render every row with a single value. If you need a quantity and item ID for each item (which seems reasonable) then you need to keep that in state per item.

Your map should be changed to use the value from each row, e.g., item.qty (oddly a string), and your quantity update should change that row's data.

Dynamically add/remove rows from html table

First off, IDs must be unique, so why not use classes here instead?

Second, if you're using jQuery, then use jQuery.

Third, you need to use event delegation when dynamically adding elements, so try the following:

$('#myTable').on('click', 'input[type="button"]', function () {    $(this).closest('tr').remove();})$('p input[type="button"]').click(function () {    $('#myTable').append('<tr><td><input type="text" class="fname" /></td><td><input type="button" value="Delete" /></td></tr>')});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><table id="myTable" style="border: 1px solid black">    <tr>        <td>            <input type="text" class="fname" />        </td>        <td>            <input type="button" value="Delete" />        </td>    </tr>    <tr>        <td>            <input type="text" class="fname" />        </td>        <td>            <input type="button" value="Delete" />        </td>    </tr>    <tr>        <td>            <input type="text" class="fname" />        </td>        <td>            <input type="button" value="Delete" />        </td>    </tr></table><p>    <input type="button" value="Insert row"></p>

Add/Delete rows in table dynamically

According to the understanding i have created simple demo for you on jsfiddle, please find that and let me know anything else you required.

http://jsfiddle.net/Lvc0u55v/12390/

Also attaching code as well.

var myApp = angular.module("myApp", []);

myApp.controller('myCtrl', function ($scope) {

$scope.rows = [{"Name" : "Chandra Prakash Variyani"}];
$scope.addRow = function () {
    var obj = { "Name": $scope.Name };

    $scope.rows.push(obj)
}
$scope.deleteRow = function (index) {

    $scope.rows.splice(index, 1);

}

});

HTML

<div class="info-box" id="lkj" ng-app="myApp" ng-controller="myCtrl">

<div class="row">
    <div class="col-lg-2"><input type="text" ng-model="Name" /></div>
    <div class="col-lg-2"><input type="button" value="Add" ng-click="addRow()" /></div>

</div>
<br />
<hr />
<table>
    <tbody>
        <tr ng-repeat="row in rows">
            <td ng-bind="$index+1">  </td>
          <td ng-bind="row.Name">  </td>
            <td> <input type="button" value="delete" ng-click="deleteRow(row.Name)" /> </td>
        </tr>
        <tr></tr>
    </tbody>
    </table>