How to delete the rows of dynamically created table with their respective dynamic id using delete bu-CodePudding

Please see the result by using Run Code Snippet Button Where you have to enter Row Name in the input and click on add button which will dynamically create table rows each row contains delete button in the fifth column. Both the Rows and Buttons will have dynamic id, var tn=0 is incrementing each row and each delete button id with 1 using tn in the code mentioned below I have created delete button onclick function like : DelButton.onclick = function (){}; How to write a function where if user click on delete button on the row than only that row with all of its elements including that button delete, Similarly, if someone have created more rows using input and add button then clicking on delete button will delete only its own respective row. Also it throws an error after deleting the second row and I know that because of the dynamic Id that is what I want to know how to write a function to delete a dynamic element containing dynamic id with increment using dynamically created button containing dynamic id with increment. Please guide using the code below:

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() {
    var delRow = document.getElementById("CreateTR"   tn);
    delRow.remove(); //this works for only one row but if Add multiple rows one by one using add button then delete button doesn't work proper
  };

  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 >
  <input  placeholder="Enter Here" id="TermNameValue" type="text" name="grade" />
</div>
<button  id="btnToaddTermRows" onclick="addTermrows()">Add</button>

<table >
  <thead >
    <tr>
      <th scope="col" >S No/</th>
      <th scope="col" >Input Value</th>
      <th scope="col" ></th>
      <th scope="col" ></th>
      <th scope="col" >Action</th>
    </tr>
  </thead>
  <tbody id="mainTBody">

  </tbody>

CodePudding user response：

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 >
  <input  placeholder="Enter Here" id="TermNameValue" type="text" name="grade" />
</div>
<button  id="btnToaddTermRows" onclick="addTermrows()">Add</button>

<table >
  <thead >
    <tr>
      <th scope="col" >S No/</th>
      <th scope="col" >Input Value</th>
      <th scope="col" ></th>
      <th scope="col" ></th>
      <th scope="col" >Action</th>
    </tr>
  </thead>
  <tbody id="mainTBody">

  </tbody>