如何使用删除按钮删除动态创建的 table 及其各自动态 ID 的行

Question

请使用运行代码片段按钮查看结果您必须在输入中输入行名称并单击添加按钮，这将动态创建 table 行，每行在第五列中包含删除按钮。行和按钮都将具有动态 id，var tn=0 递增每一行，每个删除按钮 ID 为 1 在下面提到的代码中使用 tn++ 我创建了删除按钮onclick 功能如：DelButton.onclick = function (){}; 如何编写一个函数，如果用户单击该行上的删除按钮而不是仅删除该行及其所有元素（包括该按钮），同样，如果有人使用输入和添加按钮创建了更多行，则单击删除按钮将仅删除各自的行。它还在删除第二行后抛出错误，我知道因为动态 Id，我想知道如何编写一个函数来删除包含动态 id 和增量的动态元素，使用动态创建的包含动态 id 和增量的按钮.请使用以下代码进行指导：

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 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>

Answer 1

您必须识别事件按下的按钮才能知道要删除哪一行。为此，您可以使用 event.target（=> 这是您的按钮元素）。当您访问 event.target.id 时，您可以简单地解析它以找到匹配的行。

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>

如何使用删除按钮删除动态创建的 table 及其各自动态 ID 的行

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

html

javascript

dom

function