我创建了一个按钮“添加目标”。在单击它时,将创建一个表以及一个名为“删除目标”的按钮。点击“删除目标”按钮后,该特定表格应删除。但是,最低的表将被删除。我应该在“ 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>

10-07 19:07
查看更多