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