如何使用delete按钮删除动态创建表的行及其各自的动态id

Question

请使用查看结果，其中必须在输入中输入行名，然后单击add按钮，该按钮将动态创建表行，每行包含第五列中的delete按钮。行和按钮都将具有动态id，var tn=0正在递增每一行，每个delete按钮id都使用1在下面提到的代码中使用tn++创建了delete按钮onclick函数：DelButton.onclick = function (){};如何编写一个函数，如果用户单击该行上的delete按钮，而不是只有该行中包含该按钮delete的所有元素，类似地，如果有人使用input和add按钮创建了更多的行，那么单击delete按钮只会删除它自己的行。另外，它在删除第二行后抛出一个错误，而且我知道，由于动态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>

​