0

我是使用 javascript 的新手，在寻找复制 DIV 的代码时遇到了一些困难。我找到了以下代码：

<html>
<body>
<form name="myform">
<input type="button" value="Click here" onclick="duplicate()">

<div id="original"> 
    duplicate EVERYTHING INSIDE THIS DIV
</div>

<div id="duplicater"> 
    duplicate EVERYTHING INSIDE THIS DIV
<input type="button" value="Remove Div" onclick="this.parentNode.style.display = 'none'">
</div>

<script>
var i = 0;
var original = document.getElementById('duplicater');

function duplicate() {
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicater" + ++i;
    // or clone.id = ""; if the divs don't need an ID
    original.parentNode.appendChild(clone);
}

</script>
</body>
</html>

这工作得很好。我添加了一个删除 Div 按钮，因此如果用户决定他们添加了太多的 Div，他们可以选择删除它。但是，在测试中，我发现如果用户删除 Div 一直回到第一个 Div，则不会显示任何进一步的 Duplicate Div。所以用户将不得不重新启动页面。为了解决这个问题，我尝试包含一个 IF...ELSE。

<html>
<body>
<form name="myform">
<input type="button" value="Click here" onclick="duplicate()">

<div id="original"> 
    duplicate EVERYTHING INSIDE THIS DIV
</div>

<div id="duplicater"> 
    duplicate EVERYTHING INSIDE THIS DIV
<input type="button" value="Remove Div" onclick="this.parentNode.style.display        = 'none'">
</div>

<script>
var i = 0;
var original = document.getElementById('duplicater');

function duplicate() {
if (document.getElementById("duplicater")=="none")
{
document.getElementById("duplicater")="";
}
else
{
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicater" + ++i;
// or clone.id = ""; if the divs don't need an ID
original.parentNode.appendChild(clone);
}
}

</script>

</body>
</html>

但是，这不起作用。我完全承认自己不是编码大师，如果这是一个简单的语法问题，我不会感到惊讶，但任何与此相关的观点都会被广泛接受。

4

2 回答 2

0

你的问题在这里：

this.parentNode.style.display = 'none'

这是将父节点（form）设置为不显示（这与删除它不同）。您要做的是找到lastChild父节点的 to 并将其删除。

于 2013-05-07T01:31:58.667 回答
0

马特有你的答案，我分心了，所以这是一个迟到的回应。在您的代码中：

> <input type="button" value="Remove Div" onclick="this.parentNode.style.display = 'none'">

不会“删除”节点，它只是隐藏它。要删除节点：

<input type="button" value="Remove Div" onclick="this.parentNode.parentNode.removeChild(this.parentNode)">

还：

> if (document.getElementById("duplicater")=="none")

getElementById返回具有匹配 ID 的 DOM 节点，如果没有，则返回null 。两者都不会等同于字符串“none”，因此上述内容将始终返回 false。这是一件好事，因为在这条线上：

> document.getElementById("duplicater")=""

您将尝试分配给null或 DOM 元素，这两者都是不允许的。如果左侧计算结果为null，则会导致错误。在它解析为 DOM 元素的地方，任何事情都可能发生（因为宿主对象可以做他们喜欢做的事），但很可能会导致错误。

于 2013-05-07T05:55:45.173 回答