如何在javascript中删除一个特定的dom表
How to delete a specific dom table in javascript
我已经创建了一个'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>
相关文章:
- 窗口对象属性返回一个dom节点
- 是否可以将一个DOM元素转换为另一个?或者从中复制所有属性
- 使用 Aurelia动态创建一个 dom 对象
- 如何使用 ng 无限滚动并在 http.jsonp 完成后更新另一个 DOM 元素
- 从单独的 html 页面创建一个 dom 元素
- 获取下一个 DOM 元素的 ID
- 我有一个 DOM 节点如何获取其中的文本
- 获取列表中的第一个 DOM 元素
- 在 AngularJS 中成功的 http 请求上创建一个 DOM 元素
- 如何将一个dom元素附加到另一个dom元件中,但在jquery中的第一个位置
- 有没有一种方法可以创建一个DOM对象,给定其呈现的字符串
- 从字符串创建一个 DOM 文档,不带 JQuery
- 一次显示一个DOM元素的淡入/淡出列表
- Angular 指令在从一个 DOM 元素移动到另一个 DOM 元素后停止工作
- 如何获取在视口中可见的第一个DOM元素
- 选择当前元素之后的下一个DOM元素
- 如何交换第一个和最后一个DOM元素
- 渲染速度:一次添加一个DOM项或一次添加项集
- 另一个DOM元素的JavaScript虚拟/代理输入
- 如何检查某个DOM元素是否在另一个DOM元素树中