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

How to delete a specific dom table in javascript

本文关键字：一个 dom javascript 删除      更新时间：2023-09-26

我已经创建了一个'Add Goal'按钮。在点击它时，将创建一个表和一个名为"删除目标"的按钮。在单击"Remove Goal"按钮时，应该删除特定的表。但是最低的表被删除了。我应该在'removeGoal()'函数中编写什么代码，以便删除'Remove Goal'按钮与之关联的特定表?下面是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>

为元素建立索引是非常重要的。你可以添加多个目标。我不喜欢。

使用相同的代码，您需要为按钮和表创建一个容器元素。所以，你可以很容易地处理它。 

function addGoal() {
        var div= document.createElement("div");
       var x = document.createElement("table");
       x.id = "table1";
       div.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(this)");
       div.appendChild(d);
       document.body.appendChild(div);
   }
   function removeGoal(el) {
     document.body.removeChild(el.parentElement);
   }
<html lang="en">
  <head>
    <title>Page Title</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatibile" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="netguru recruitment task">
  </head>
  <body>
    <button type="button" onclick="javascript:addGoal()">Add Goal</button>
    <script>
      
    </script>
  </body>
</html>

相关文章：