javascript - 如何在javascript中删除特定的dom表-6ren

javascript - 如何在javascript中删除特定的dom表

转载作者：行者123 更新时间：2023-11-27 23:50:05

我创建了一个“添加目标”按钮。单击它后，将创建一个表以及一个名为“删除目标”的按钮。单击“删除目标”按钮后，应删除该特定表。但最低的表被删除。我应该在“removeGoal()”函数中编写哪些代码才能删除与“删除目标”按钮关联的特定表？下面是 HTML 和 Javascript 代码。

HTML 内容:

<!DOCTYPE html>
<html lang="en-US">
  <head>
  </head>
  <body>
    <button type="button" onclick="addGoal()">Add Goal</button>
  </body>
</html>

JavaScript 内容:

<script language="javascript" type="text/javascript">
   function addGoal() {
     var x = document.createElement("table");
     x.id = "table1";
     document.body.appendChild(x);

     var y = document.createElement("tr");
     x.appendChild(y);

     var z = document.createElement("th");
     z.innerHTML = "Goal Name";
     y.appendChild(z);

     var a = document.createElement("tr");
     x.appendChild(a);

     var b = document.createElement("td");
     a.appendChild(b);

     var c = document.createElement("input");
     c.type = "text";
     c.name = "goalName";
     b.appendChild(c);

     var d = document.createElement("button");
     d.type = "button";
     d.innerHTML = "Remove Goal";
     d.id = "button1";
     d.setAttribute("onclick", "removeGoal()");
     document.body.appendChild(d);
   }

   function removeGoal() {
     var removeTab = document.getElementById('table1');
     var parentE1 = removeTab.parentElement;
     parentE1.removeChild(removeTab);  

     var removeBut = document.getElementById('button1');
     var parentE2 = removeBut.parentElement;
     parentE2.removeChild(removeBut); 
     //This removes the lowest table.
     //Syntax to delete the table the 'Remove Goal' button is associated with
   }
<script>

最佳答案

您不能在多个元素上使用相同的 id。调用将 id 作为字符串参数传递的函数。这样您就可以为表格和按钮设置特定的 ID。为了能够删除具有特定 id 的元素，您首先需要进行一些序列化。使用如下:

    addGoal('myTableID','myButtonID')

var i = 0

function addGoal(table, button) {
  i++;
  var x = document.createElement("table");
  x.id = table + i;
  document.body.appendChild(x);

  var y = document.createElement("tr");
  x.appendChild(y);

  var z = document.createElement("th");
  z.innerHTML = "Goal Name";
  y.appendChild(z);

  var a = document.createElement("tr");
  x.appendChild(a);

  var b = document.createElement("td");
  a.appendChild(b);

  var c = document.createElement("input");
  c.type = "text";
  c.name = "goalName";
  b.appendChild(c);

  var d = document.createElement("button");
  d.type = "button";
  d.innerHTML = "Remove Goal";
  d.id = button + i;
  d.setAttribute("onclick", "removeGoal('" + table + i + "','" + button + i + "')");
  document.body.appendChild(d);
}

function removeGoal(table, button) {
  var removeTab = document.getElementById(table);
  var parentE1 = removeTab.parentElement;
  parentE1.removeChild(removeTab);

  var removeBut = document.getElementById(button);
  var parentE2 = removeBut.parentElement;
  parentE2.removeChild(removeBut);
}

<!DOCTYPE html>
<html lang="en-US">

<head>
</head>

<body>
  <button type="button" onclick="addGoal('table','button')">Add Goal</button>
</body>

</html>

关于javascript - 如何在javascript中删除特定的dom表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32787154/