Question

我是新手使用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>

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

Answer 1

你的问题在这里：

this.parentNode.style.display = 'none'

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

Answer 2

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

> <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元素的地方，任何事情都可能发生（因为宿主对象可以做他们喜欢的事情），但可能会导致错误。

重复Div - 删除选项可防止其他Div重复

2 个答案: